深入学习flex布局

1、前言： 

对于工作中经常用到的flex布局（弹性布局），深入学习一下

2、基础概念：

采用flex布局的元素，叫flex容器（简称），所有子元素自动成为容器成员，叫flex项目。

容器默认存在两根轴：水平的主轴、垂直的交叉轴。 

项目默认沿主轴排列。

将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）。当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

3、具体学习flex布局的用法

类别	属性	描述	可选值	图例
容器属性	display	指定 HTML 元素的盒子类型	flex/ inline-flex
	flex-direction	决定主轴的方向（即项目的排列方向）	row：默认值，主轴沿水平方向从左到右 column：主轴沿垂直方向从上到下
	flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行	nowrap：默认值，不换行 wrap： 换行
	flex-flow	flex-direction 和 flex-wrap 两个属性的简写
	justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式	flex-start：默认值，左对齐 center：居中 space-between：两端对齐 space-around：每个项目两侧的间隔相等
	align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式	stretch：默认值，项目将被拉伸以适合容器 center：项目位于容器的中央
	align-content	只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐 与 justify-content 属性类似， 可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式	stretch：默认值，将项目拉伸以占据剩余空间 center：项目在容器内居中排布 space-between：多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部 space-around：多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
项目属性	order	设置弹性盒子中子元素的排列顺序
	align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
	flex	设置弹性盒子中子元素如何分配空间

 

 

 

 

 

 

在实际项目中，经常会遇到弹性布局

详细学习地址：CSS flex布局（弹性布局/弹性盒子）