>>>何为Flex
- 块级元素侧重于垂直方向、行内元素侧重于水平方向。然而Flex与方向无关。
- flex布局可以实现空间自动分配、自动对齐。
- flex适用于简单的线性布局,更复杂的要交给grid布局
>>>flex item、flex container、主轴、侧轴、主尺寸、侧尺寸、起点终点
>>>flex container的六个属性 ---> 在父元素{display:flex;}
1. flex-direction(方向)
默认row(一行一行的展示从左往右) row-reverse(从右往左,宽度不够了也会挤在这里)
column(从上往下) row-reverse(从下往上,高度不够了也会挤在这里)
2. flex-wrap:wrap----------------可以换行了
3. flex-flow: row wrap(以上两种的缩写)
4. justify-content : 主轴对齐方式
space-between
space-around
flex-start
flex-end
center
5.align-items: 侧轴上的对齐方式(还是记图形不叫方便)
flex-end
flex-start
center
base-line
6. align-content:(不常用)
space-between
space-around
flex-start
flex-end
center
我怎么有种回到高中背英语单词的感觉!!!!!
>>>justify-items的六个属性
1. flex-grow(成长) 分配多余的空间
2.flex-shrink(收缩比例)一般不用
3.flex-basis(原始大小。但可以设置)一般不用
4.flex以上三种的缩写
5.order:123 改变顺序
6.align-self:孩子自己的对齐方式
flex-start
flex-end
center