title	date	tags	categories
CSS3布局——flexbox弹性盒子布局	2017-10-23 15:03:06 -0700	Css	Css

CSS3布局——flexbox弹性盒子布局.md

我们以前写页面总会受到各种绝对定位啊、相对定位啊、浮动啊等等的困扰，然而有了Flexbox，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局，太开心了有木有啊😆。

什么是弹性盒子？

弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

使用弹性盒子的好处？

那么我们为什么要使用弹性盒子呢？因为简单！以前困扰我们的布局问题，现在几个属性就解决了，你说爽不爽呢？

使用弹性盒子应注意什么？

虽然他行盒子解决了布局这件麻烦事，但是我们还是要注意几个问题，那就是：

• 不兼容低版本的IE浏览器
• 使用flex 布局之后，子元素的 float、clear、vertical-align等属性将会失效

注意以上几点后，那么我们开始愉快的研究弹性布局。

弹性盒子有哪些属性？

研究弹性布局我们首先要研究下它有哪些属性，我把它总结成了作用在父容器上的和子元素上的。在示例之前我们先简单做个一览。

<style> table th:first-of-type { width:100px; } </style>

作用在父容器上的

属性	值
flex-direction	row	row-reverse	column	column-reverse
flex-wrap	nowrap	wrap	wrap-reverse	initial	inherit
flex-flow	nowrap	wrap	wrap-reverse
justify-content	flex-start	flex-end	center	space-between	space-around
align-content	flex-start	flex-end	center	space-between	space-around	stretch
align-items	flex-start	flex-end	center	baseline	stretch

作用在子元素上的

属性	值
flex	auto	none
flex-grow	<number>
flex-shrink	<number>
flex-basis	<length>	auto
order	<integer>
align-self	auto	flex-start	flex-end	center	baseline	stretch

作用在父容器上的属性

方向 flex-direction

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

这个属性是用来固定方向的，四个值也简单易懂，行row，反向行row-reverse，列column，反向列column-reverse。

row row-reverse column column-reverse

换行 flex-wrap

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

此属性决定能不能换行，这次我们给父容器设置了宽度，导致子元素装不下了，看看wrap和nowrap的区别，反向的就不看了。 wrap nowrap 我们发现，这两个属性的区别就是，wrap回保持原宽度并换行，nowrap则是不换行，宽度进行压缩。

方向&换行 flex-flow

就是合在一起写，不赘述。但是最后的stretch比较特殊，如果子元素没设置高度（上面的都设置了高度，小方块），就会被拉伸。

.dad{
    flex-wrap:row nowrap;
}

水平对齐 justify-content

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

五个值，左对齐flex-start，居中flex-end，右对齐center，均分space-around，顶头均分space-between flex-start flex-end center space-around space-between

垂直对齐 align-content

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

和上面大同小异，指示方向不同。 flex-start flex-end center space-around space-between stretch

项垂直对齐 align-item

.dad{
    flex-wrap: wrap;
    align-item: flex-start | flex-end | center | space-between | space-around;
}

最后再说说这个align-item，他和上面的align-content的区别，在于它不是相对于整个内容块，而是垂直的一项的对齐方式，具体请看图示（我画了辅助线）。 在这里我选的是竖行两行作为参照。 flex-start flex-end stretch（这个为了区分我设置了三项没高度的子元素） baseline 当然，baseline是个例外，他以项目的第一行文字的基线对齐 baseline

作用在子元素上的属性

排列顺序 order

这个属性很简单，就是按数字大小排列顺序，下面我写了个order和标题相反的四个元素，请看排列

<div class="dad">
    <div class="son" style="order:4"><h1>1</h1></div>
    <div class="son" style="order:3"><h2>2</h2></div>
    <div class="son" style="order:2"><h3>3</h3></div>
    <div class="son" style="order:1"><h4>4</h4></div>
</div>

自轴对齐 align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。除了auto有所不同，如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。

<div class="dad">
    <div class="son" style="align-self:flex-start">flex-start</div>
    <div class="son" style="align-self:center">center</div>
    <div class="son" style="align-self:flex-end">flex-end</div>
    <div class="son" style="align-self:baseline">baseline</div>
    <div class="fake-son" style="align-self:stretch">stretch<br>(没给高度)</div>
</div>

基准线 flex-basis

定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。 定义弹性盒子元素的默认基准值。在主轴为水平方向时，这个属性一旦定义，元素宽带将会失效。

扩展率 flex-grow

定义弹性盒子元素的扩展比率，默认为零。其实就是把剩下的空间用来扩增了。

默认，且有空余空间：

<div class="dad">
    <div class="son">默认</div>
    <div class="son">默认</div>
    <div class="son">默认</div>
</div>

均等扩展后：

<div class="dad">
    <div class="son" style="flex-grow:1">flex-grow:1</div>
    <div class="son" style="flex-grow:1">flex-grow:1</div>
    <div class="son" style="flex-grow:1">flex-grow:1</div>
</div>

不均等扩展后：

<div class="dad">
    <div class="son" style="flex-grow:1">flex-grow:1</div>
    <div class="son" style="flex-grow:3">flex-grow:3</div>
    <div class="son" style="flex-grow:1">flex-grow:1</div>
</div>

收缩率 flex-shrink

定义弹性盒子元素的收缩比率（当然此时父元素就不要换行了），默认为1。就是在容器宽度不够时，元素进行收缩，此时元素的宽度将失效。 默认为1时收缩：

<div class="dad">
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
</div>

为0时不收缩：

<div class="dad">
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:0">flex-shrink:0</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
</div>

更大时收缩的更厉害：

<div class="dad">
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:2">flex-shrink:2</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
    <div class="son" style="flex-shrink:1">flex-shrink:1</div>
</div>

综合 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 auto：0 1 auto none：0 0 auto

总结

弹性盒子布局简单来说就是两部分，约束容器的和约束元素的，牢牢掌握这几个属性，布局将事半功倍。

参考资料

• 菜鸟教程的CSS3 弹性盒子(Flex Box)
• 阮一峰的网络日志Flex 布局教程：语法篇