今日学习内容

• 弹性父元素设置

弹性盒是一种新的布局形式，可以决定弹性子元素的显示效果，可以自动设置弹性子元素中间的空隙，还能实现弹性子元素随着父元素的变大而变大，缩小而缩小

弹性盒里包含弹性子元素

1. 将盒子设置为弹性盒 display:flex;
2. 弹性子元素的排列方式 flex-direction

Row 默认值 自左向右

Row-reverse  自左向右的翻转

Column  自上而下

Column-reverse  自上而下的翻转

1. 弹性子元素的主轴对齐方式justify-content

Flex-start  左  上

Flex-end   右   下

Center     居中

Space-between  两端对齐

Space-around    中间是两端的倍数

Space-evenly    所有空隙都一样 平均分配

那个方向是主轴取决于弹性子元素的排列方式：如果是自左向右排列x轴为主轴

如果是自上而下排列y轴为主轴

1. 弹性子元素侧轴对齐方式align-items

Stretch：弹性子元素的高度与父元素的高度一样（如果子元素不设置高度默认就是一样）

Flex-start：  竖着排列 上   横着排列  左

Flex-end     竖着排列  下   横着排列  右

Center    居中

Baseline   基线对齐

1. 是否允许弹性子元素换行属性flex-wrap

如果弹性子元素的总宽度超过弹性父元素的总宽度时，弹性子元素默认情况下不会换行显示，或缩小弹性子元素的宽度，缩小到只能放下弹性子元素内容的宽度，次数如何还有超出，会显示溢出效果，也不会换行显示

Nowrap：默认值 不允许换行

Wrap：允许换行

Wrap-reverse：允许换行并行翻转

1. 弹性子元素行的控制属性align-content

注意：只有弹性子元素存在换行属性时此属性才能生效

Flex-start 上

Flex-end 下

Center 居中

Space-between 两端

Space-around  中间是两端的倍数

Space-evenly  平均分配

1. Flex-direction与flex-wrap的缩写flex-flow

• 弹性子元素设置

1. 设置弹性子元素的显示顺序 order  默认值0

值越小越靠前显示   可以设置为负值

1. 设置弹性子元素的宽度 flex-basis 相当于width  默认值auto
2. 平分父元素剩余的空间flex-grow   默认值0
3. 是否允许弹性子元素进行收缩 flex-shrink  默认值1 允许  0不允许
4. 平均分配弹性父元素  设置弹性子元素所占份数flex

Flex是flex-grow flex-shrink flex-basis的缩写 默认值0 1 auto

1. 设置弹性子元素单个的对齐方式 align-self

Baseline  基线

Stretch  和父元素的高度一样

Center  居中

Flex-start 上  左

Flex-end  下  右

• 媒体查询