1.flex布局是一种浏览器提倡的布局模式,让网页布局更简单和灵活,避免浮动脱标的问题。
2.外面大的父盒子称为:弹性容器,里面小的子盒子称为:弹性盒子
3.只要给父盒子添加display:flex,里面的子盒子不管是行内,行内块,块级都可以给宽高,不需要去转换,都是一样的,可以自动的挤压或拉伸。
4.falex布局组成部分: 弹性容器 弹性盒子 主轴 侧轴/交叉轴( 水平的默认为主轴 垂直的默认为侧轴,但轴的方向是可以改变的)
5.使用justify-content调节元素在主轴的对齐方式
6.justify-content: flex-start这个是默认值,给父盒子设置display:flex 就会触发这个默认值,也就是布局的初始
7.给父盒子添加display:flex (默认值:justify-content: flex-start)子盒子就靠左显示在一行
8.给父盒子添加justify-content:flex-end 让子盒子靠右显示在一行
9.给父盒子添加justif-content:center 让子盒子水平居中
10.给父盒子添加justify-content:space-around 子盒子两边留白边距相等,两个盒子中间的留白就是左右靠边留白的2倍间距
11.给父盒子添加justify-content: space-between 让盒子两边没有缝隙中间缝隙相等
12.给父盒子添加align-items调节元素在侧轴的对齐方式
13.align-items:stretch是默认效果,沿着侧轴线被拉伸至铺满容器,前提是没有设置高度
14.align-items:flex-end 终点沿着侧轴排序
15.align-items:center 沿着侧轴居中排序
16.给父盒子设置display:flex, 那么子盒子也可以加自己的侧轴对齐方式.
17.语法:align-self :center ,想让那个盒子动就给那个盒子添加.
18.align-self:flex-end,在子盒子里面添加,盒子沿着侧轴掉到最下面.
19.给父亲盒子添加flex-direction改变主轴排列方式
| 属性值 | 作用 |
|---|---|
| row | 行,水平(默认值) |
| column | *列,垂直 |
| row-reverse | 行,从右向左 |
| column-reverse | 列,从下向上 |
20.给父盒子添加display:flex
21.给父盒子添加flex-direction:column
22.把主轴转换成侧轴之后的使用方法,都是给父元素添加。
23.给父盒子添加align-content:(后面的跟主轴的代码是一样的)方法,就可以实现侧轴多个盒子像主轴一样在侧轴展示。
