弹性布局常用的属性

弹性布局

流式布局：网页默认的布局方式，在流式布局中分为行内元素和块元素，行内元素总是从左向右排列，块元素总是从上向下排列。

弹性布局：是css3新增的布局方式，不同于流式布局。弹性布局也叫Flex布局，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

弹性布局特点：

1. 总是对父元素设置，子元素起效（只针对第一级子元素）

2. 弹性项目（子元素）没有行元素、块元素之分，所有标签都一样，从左到右排列，高度默认100%（包含外边距）

3. 在弹性布局中，浮动失效，定位可用

4. 在弹性布局中，默认元素从左向右排列，放不下会溢出，不会换行

   flex-wrap 属性

   • wrap自动换行
   • nowrap不换行（默认）
   • wrap-reverse反向换行（第二行在上面）

5. 设置元素排列方向

   实际就是设置弹性容器主轴和交叉轴的方向

   • 主轴：弹性容器中元素从第一个到最后一个的排列反向就是主轴方向，默认从左向右
   • 交叉轴：总是和主轴垂直，默认从上向下

   注意：主轴和交叉轴都不是唯一的，每一行都有一个主轴和交叉轴

   flex-direction属性

   • row：主轴方向水平，从左向右（默认）
   • column：主轴方向垂直，从上向下
   • row-reverse：与row相反
   • column-reverse：与column相反

6. 设置主轴方向（默认水平）的对齐方式

   justify-content属性

   • center、left、right
   • space-between：两端对齐
   • space-evently：间隙平分
   • space-around：间隙平分到每一个元素两端

7. 设置一个交叉轴方向上的对齐方式

   （适用于只有一行的情况）

   align-items属性（元素自身要设置宽高）

   • center：上下居中
   • flex-end：居于底部
   • flex-start：居于顶部（默认）

8. 设置多轴对齐方式

   （适用于多行情况）

   align-content属性

   • center、left、right、space-between、space-evently、space-around、flex-end、flex-start
   • 垂直方向上（个人理解）

9. align-item单行 和 align-content多行 不要一起使用，会冲突

弹性布局给所有弹性项目设置了统一的排列方式，如果让其中某些弹性项目有不同的布局方式，可以给弹性项目设置如下单独的样式：

1. order定义元素的排列顺序，值越小越靠前（默认0）
2. align-self：单个元素在交叉轴上的对齐方式，值与align-item的相同
3. flex-grow：如果有空白区域，设置元素瓜分空白区域的比例，默认0，表示瓜分剩余空白区域
4. flex:设置完弹性布局以后，如果想让子元素等比例均分父元素空间，可以给第一个子元素设置flex:n，给第二个子元素设置flex:m，那么父元素会被均分成(n+m)份，第一个子元素占了n份 ，第二个占了m份（根据你设置的排列方向）
5. flex-shrink：但容器不换行，容器宽度不足时，元素的宽度会被压缩，flex-shrink设置每一个元素被压缩的比例
   • 默认1（等比例压缩）
   • 0表示不压缩
   • 值越大，压缩的越多