一、flex
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
一下对6个容器属性的简单介绍
1. flex-direction属性决定排列方向
值：
row(默认值)：水平方向，从右边开始。
row-reverse：水平方向，从右边开始。
column：垂直方向，从上到下。
column-reverse：垂直方向，从下往上
2. flex-wrap如何换行
值：
nowrap（默认值）：不换行。
wrap：换行，第一行在上面
wrap-reverse：换行。第一行在下方。
3. flex-flow是上面两个属性的缩写，默认值为row nowrap。
4. justify-content定义水平方向对齐方式
值：
flex-start(默认值)：左对齐。
flex-end：右对齐。
center：水平居中
space-between：两端对齐，项目之间间隔相等。
space-around：每个项目两侧的间隔相等。
5. align-items垂直对齐方式
flex-start：y轴的起点对齐。
flex-end：y轴的终点对齐。
center：垂直居中
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目没有设置高度或者为auto，将占满整个容器。
6. align-content定义多个轴对齐方式（这里不详细讲解虽然整个讲解都不详细）。
四、项目属性
一下6个项目属性设置在项目上。
1. order
2. flex- grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
1. order属性定义项目的排列顺序。数值越小，排列越考前，默认值为0。
2. flex- grow属性定义项目的放大比例，默认值为0，即不放大。如果项目值都为1则平均分，有个值为2其他值为1则占据剩余空间比1多一倍。
3. flex-shrink定义项目的缩小比例，默认为1，如过空间不足，项目将缩小。
4. flex-basis定义了在分配多余空间之前，项目的主轴空间。它可以设为width或height属性一样的值，则该项目占据固定的空间。
5. flex是上面2、3、4项的简写方式，默认值为0 1 auto。
6. align-self属性允许单个项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承夫元素的align-items属性，如果没有夫元素，则等同于stretch。除了auto，其他值和align-items属性完全一样。
<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>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
