flex是flexible box的缩写,意为“弹性布局”;
display:flex;
box{
display:flex;
}
我只简单的说一下容器和项目,因为只关系容器和项目来讲的(个人理解)。
有6个属性
1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content
值:
row(默认值):水平方向,从右边开始。
row-reverse:水平方向,从右边开始。
column:垂直方向,从上到下。
column-reverse:垂直方向,从下往上
值:
nowrap(默认值):不换行。
wrap:换行,第一行在上面
wrap-reverse:换行。第一行在下方。
值:
flex-start(默认值):左对齐。
flex-end:右对齐。
center:水平居中
space-between:两端对齐,项目之间间隔相等。
space-around:每个项目两侧的间隔相等。
flex-start:y轴的起点对齐。
flex-end:y轴的终点对齐。
center:垂直居中
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目没有设置高度或者为auto,将占满整个容器。
一下6个项目属性设置在项目上。
1. order 2. flex- grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
<style> *{ margin: 0; padding: 0; } div{ border: 1px solid black; } .boxbig{ width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .box1{ border: 1px solid red; width: 100px; height: 100px; } </style> </head> <body> <div class="boxbig"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div> </body>
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论