flex布局单独⼀⾏_CSS3Flex布局（伸缩布局盒模型）
CSS3引⼊了⼀种新的布局模式——Flexbox布局，即伸缩布局盒（Flexible Box）模型，此布局对于设计⽐较复杂的页⾯⾮常有⽤，特别是“垂直居中”布局，⾮常容易实现。
⼀、Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，⽤来为盒状模型提供最⼤的灵活性。
任何⼀个容器都可以指定为Flex布局。
三、容器的属性
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
flex布局对齐方式
align-items
align-content
CSS3 弹性盒⼦内容
弹性盒⼦由弹性容器(Flex container)和弹性⼦元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了⼀个或多个弹性⼦元素。
注意： 弹性容器外及弹性⼦元素内是正常渲染的。弹性盒⼦只定义了弹性⼦元素如何在弹性容器内布局。
注意：
弹性⼦元素通常在弹性盒⼦内⼀⾏显⽰。默认情况每个容器只有⼀⾏。
以下元素展⽰了弹性⼦元素在⼀⾏内显⽰，从左到右:
flex-direction
flex-direction 属性指定了弹性⼦元素在⽗容器中的位置。
语法
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列⽅式。
row-reverse：反转横向排列（右对齐，从后往前排，最后⼀项排在最前⾯。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后⼀项排在最上⾯。
justify-content 属性
内容对齐（justify-content）属性应⽤在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 属性
align-items 设置或检索弹性盒⼦元素在侧轴（纵轴）⽅向上的对齐⽅式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 属性
flex-wrap
flex-wrap 属性⽤于指定弹性盒⼦的⼦元素换⾏⽅式。
语法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各个值解析:
nowrap - 默认， 弹性容器为单⾏。该情况下弹性⼦项可能会溢出容器。
nowrap
wrap - 弹性容器为多⾏。该情况下弹性⼦项溢出的部分会被放置到新⾏，⼦项内部会发⽣断⾏
wrap
wrap-reverse -反转 wrap 排列。
wrap-reverse
align-content 属性
align-content 属性⽤于修改 flex-wrap 属性的⾏为。类似于 align-items, 但它不是设置弹性⼦元素的对齐，⽽是设置各个⾏的对齐。语法
align-content: flex-start | flex-end | center | space-between | space-around | stretch

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。