响应式布局2 - flex基础与应用

目录

什么是flex

为什么用flex

flex-direction

flex-wrap

flex-flow

justify-content

---

什么是flex

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

为什么用flex

• 用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
• 更加符合响应式设计的特点

flex-direction

作用：子元素在父元素盒子中的排列方式

属性值	作用
row	默认值。按从左到右的顺序显示。
row-reverse	与row相同，但是以相反的顺序。
column	灵活的项目将垂直显示，按从上到下的顺序。
column-reverse	与column相同，但是以相反的顺序。

flex-wrap

作用：子元素在父元素盒子中的是否换行（列）

属性值	作用
nowrap	默认值。不换行或不换列。
wrap	换行或换列。
wrap-reverse	换行或换列，但是以相反的顺序。

flex-flow

作用：flex-direction和flex-wrap属性的简写形式

语法：flex-flow:<flex-direction> || <flex-wrap>

justify-content

作用：用来在存在剩余空间时，设置为间距的方式

属性值	作用
flex-start	默认值。从左到右，挨着行的开头。
flex-end	从右到左，挨着行的结尾。
center	居中显示。
space-between	平均分布在该行上，两边不留间隔空间。
space-around	平均分布在该行上，两边留有一半的间隔空间。

 

align-items

作用：设置每个flex元素在交叉轴上的默认对齐方式。

属性值	作用
flex-start	位于容器的开头。
flex-end	位于容器的结尾。
center	居中显示。