flex布局的学习笔记

前言

0.父元素称为元容器，子元素称为项目

1.给父盒子添加diasplay: flex;

则子元素全部转为块元素，可写宽度，不需要 再添加/清除浮动，水平居中

2.布局原理：

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction属性决定主轴方向（项目的排列方向），剩下为侧轴

属性row，从左往右（x轴）

row-reverse; 从右到左

属性column，从上到下（y轴）

column-reverse; 从下到上

justify-content设置主轴上元素的排列方式

1.先设置主轴

2.justify-content: 是设置主轴上子元素的排列方式

默认为justify-content: flex-start;从头到尾

属性： flex-start;从头到尾

flex-end 从尾到头

center 子元素居中对齐

space-around; 平分剩余空间

space-between; 先两边贴边，再平分剩余空间

flex-wrap设置子元素是否换行

flex布局中，默认子元素是不换行的，若装不开，会缩小元素的宽度，放到父元素里面

属性 nowrap（默认，不换行）

wrap换行

align-items设置侧轴的子元素排列方式（单行）

flex-start从上到下

flex-end从下到上

center 垂直居中

stretch拉伸（默认值）（了解）

align-content设置侧轴的子元素排列方式（多行）

flex-start从上到下

flex-end从下到上

center 垂直居中

space-around 子项在侧轴平分剩余空间

space-betwee 先两边贴边，再平分剩余空间

stretch拉伸（默认值）（了解）

flex-flow复合属性

flex-flow == direction flex-wrap

flex布局子项常见属性

flex

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

flex: 1; 默认为0

还可以写百分比%, 相对于父级来说

flex: 20%

align-self控制子项自己在侧轴的排列方式（单个）

order定义项目的排列顺序

数值越小，越靠前，默认0