flex布局一行三个_CSS Flex布局

Flex之前

在flex布局出现以前，css布局大致就以下几种布局：

主要使用：

• normal flow 正常流、文档流
• float + clearfix
• position: relative + position: absolute
• display: inline-block
• 负 margin

Flex来了！

css3新的布局方式——Flex布局！

CSS3提供了一个额外的布局系统。在这个新的框模型中，框的子代采用水平或垂直布局，而且可将未使用的空间分配给特定的子代，或者通过“弹性”分配给应展开的子代，在各子代间进行分配。这些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在两个维度中构建布局。

块级布局侧重垂直方向，行内布局侧重水平方向，而Flex布局与方向无关

Flex布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）

Flex适用于简单的线性布局，更复杂的布局还是需要使用grid布局

学习Flex

学习Flex之前我们先认识一下Flex容器，flex容器分为父容器（container）与子容器（items）

紫色部分为父容器（container）

黄色部分为子容器（items）

父容器（container）属性：

display:flex 让一个元素变成flex容器

一个容器设置了display:flex;属性就定义了一个flex容器，它的直接子元素会接受这个flex环境

.container {display: flex; /* or inline-flex */ }

flex-direction 改变items流动方向（主轴）

设置或检索伸缩盒对象的子元素在父容器中的位置

.container {flex-direction: row | row-reverse | column | column-reverse; }

• row 默认值，水平从左到右

• row-reverse 水平从右到左

• column 垂直从上到下

• column-reverse 垂直从下到上

flex-wrap 改变折行

设置或检索弹性盒模型对象的子元素超出父容器时是否换行

默认所有的flex item会尝试放在一行中，可以通过设置flex-wrap设置新行的方向

.container{flex-wrap: nowrap | wrap | wrap-reverse; }

• nowrap 默认值，不换行
• wrap 换行
• wrap-reverse 换行，并且颠倒行顺序

flex-flow

flex-direction 和 flex-wrap 的缩写，默认值row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content主轴对齐方式

默认主轴是横轴，除非改变了flex-direction方向

.container {justify-content: flex-start | flex-end | center | space-between | space-around; }

• flex-start 默认值、弹性盒子元素将向行起始位置对齐

• flex-end 弹性盒子元素将向行结束位置对齐

• center弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐

• space-between 弹性盒子元素会平均地分布在行里

• space-around 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半

align-items 次轴对齐方式

默认次轴是纵轴

.container {align-items: flex-start | flex-end | center | baseline | stretch; }

• flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界

• flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界

• center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

• baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐

• stretch 如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制

align-content 多行内容分布

设置或检索弹性盒堆叠伸缩行的对齐方式

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

• flex-start 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行

• flex-end 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行

• center 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等

• space-between 各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等

• space-around 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半

• stretch 各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸

子容器（items）属性：

order item上面加order

.item {order: <integer>; }

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，还可以是负数

flex-grow 控制自己如何长胖

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {flex-grow: <number>; /* default 0 */ }

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 控制如何变瘦

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {flex-shrink: <number>; /* default 1 */ }

一般写flex-shrink:0; 防止变瘦，默认是1

flex-basis 控制基准宽度，默认是auto

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，即项目的本来大小。

flex

flex-grow, flex-shrink,flex-basis 的缩写，空格隔开

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

align-self 订制align-items

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

Flex布局实践：

• 页面布局（topbar+main+tabs）

https://jsbin.com/bocuwebehi/edit?html,css,output

• 完美居中

display: flex; justify-content: center; align-items: center;

flex布局经验：

• flex基本可以满足所有布局需求
• flex 和 margin-xxx: auto配合有意外效果
• 永远不要写死 width 和 height，除非情况特殊
• 用 max-width/min-width/max-height/min-height

重点！记住以下常用属性：

• display: flex;
• flex-direction: row/column
• flex-wrap: wrap
• justify-content: center/space-between;
• align-items: center

好了放松下，来玩个flex青蛙小游戏

Flexbox Froggy​flexboxfroggy.com

详情参考阮一峰大神的flex教程！

Flex 布局教程：语法篇 - 阮一峰的网络日志​www.ruanyifeng.com

总结

以上是生活随笔为你收集整理的flex布局一行三个_CSS Flex布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。