CSS Flex布局教程

创作时间:

作者:

@小白创作中心

引用

来源

https://m.itxst.com/css-flex/tutorial.html

Flex布局是W3C组织在2009年提出的一种新布局方案，可以方便地解决原来通过依赖display和浮动方案的缺陷。经过多年的发展，Flex布局目前可以在所有主流浏览器中运行，但需要注意IE浏览器需要在IE10及以上版本才支持，在移动端，安卓4.4以下版本和iOS 7.1以下版本不支持。

Flex 是 Flexible Box 的缩写，用来为HTML盒状模型提供极大的方便性。当元素设为 Flex 布局以后，它的所有子元素自动成为容器成员，而子元素的float、clear和vertical-align属性将失效。我们通过以下例子来看CSS Flex的一个最基本布局。

属性名称	说明	可选值
flex-direction	子元素在主轴的排列方向	row
flex-wrap	子元素的换行方式	nowrap
flex-flow	flex-direction属性和flex-wrap属性的简写形式	默认值为row nowrap
justify-content	子元素在主轴上的对齐方式，当flex-direction为row可以理解成水平对齐方式	flex-start
align-items	子元素在交叉轴上对齐方式，当flex-direction为row可以理解成垂直对齐方式	flex-start
align-content	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用	flex-start

属性名称	说明
order	子元素的排列顺序。数值越小越靠前，默认为0
flex-grow	子元素的放大比例，即存在剩余空间充足子元素如何放大，默认为0空间充足也不放大
flex-shrink	子元素的缩小比例，即如果空间不足时子元素如何缩小，默认为1空间不足时都将等比例缩小
flex-basis	子元素占的空间，跟width或height属性一样的值（比如50px），默认值为auto
flex	flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self	允许单个子元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch