彻底搞懂弹性布局flex
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了彻底搞懂弹性布局flex相关的知识，希望对你有一定的参考价值。
参考技术A 说明：大家在看弹性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。想看我的原文地址，请点击这里。
弹性布局基本概念
任何一个容器都可以设置弹性布局，一旦容器设置了 弹性布局以后，子元素的float、clear和vertical-align属性将失效。
如果设置容器的 水平方向 为 主轴 ，则 垂直方向 为 交叉轴 。
如果设置容器的 垂直方向 为 主轴 ，则 水平方向 为 交叉轴 。
弹性布局父类容器常用属性
设置容器为弹性布局 display
display：flex 设置块元素为弹性布局
display：inline-flex 设置行内元素为弹性布局
子元素排列方向 flex-direction
flex-direction : row（默认值）
设置容器的水平方向为主轴，垂直方向为交叉轴，起点在左端，子元素在主轴上从左向右排列。
flex-direction : row-reverse
设置容器水平方向为主轴，垂直方向为交叉轴，起点在右端，子元素在主轴上从右向左排列。
flex-direction : column
设置容器垂直方向为主轴，水平方向为交叉轴，起点在上端， 子元素在主轴上从上向下排列。
flex-direction : column-reverse
设置容器垂直方向为主轴，水平方向为交叉轴，起点在下端， 子元素在主轴上从下向上排列。
子元素换行方式 flex-wrap
子元素换行是相对于主轴来说的。
flex-wrap ：nowrap（默认）
子元素不换行，当子元素宽度超过父类，会压缩子元素的宽度。
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
flex-wrap :nowrap;
.boxSelf
width: 100px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
<div class="boxSelf">6</div>
<div class="boxSelf">7</div>
<div class="boxSelf">8</div>
</div>
</body>
</html>
flex-wrap ：wrap
子元素换行，在交叉轴上等距离平分。自己感受换行方式。
flex-wrap ：wrap-reverse
子元素换行，在交叉轴上等距离平分。自己感受换行方式。
在主轴上子元素对齐方式justify-content
justify-content ：flex-start（默认值）
设置子元素子在主轴起点对齐
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
.boxSelf
width: 100px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
</div>
</body>
</html>
justify-content ：flex-end
设置子元素子在主轴终点对齐
justify-content ：center
设置子元素子在主轴居中对齐
justify-content ：space-between
设置子元素子在主轴两端对齐，子元素之间的间隔都相等。
justify-content ：space-around
设置子元素子在主轴两侧的间隔相等。子元素之间的间隔比子元素与边框的间隔大一倍。
在交叉轴上子元素对齐方式align-items
align-items属性一般在单行使用
align-items：flex-start
设置子元素在交叉轴上起点对齐。
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
.boxSelf
width: 100px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
</div>
</body>
</html>
align-items：flex-end
设置子元素在交叉轴上的终点对齐。
align-items：center
设置子元素在交叉轴上居中对齐。
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items:center;
.boxSelf
width: 100px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
</div>
</body>
</html>
align-items：baseline
设置子元素在交叉轴的第一行文字的基线对齐。
align-items：stretch（默认值）
如果子元素未设置高度或auto，子元素将占满整个容器的高度。
align-content
align-content属性一般在多行使用
align-content：flex-start
设置子元素在交叉轴上起点对齐。
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
.boxSelf
width: 100px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
<div class="boxSelf">6</div>
<div class="boxSelf">7</div>
<div class="boxSelf">8</div>
<div class="boxSelf">9</div>
<div class="boxSelf">10</div>
</div>
</body>
</html>
align-content：flex-end
设置子元素在交叉轴终点对齐。
align-content：center
设置子元素在交叉轴中点对齐。
align-content：space-between
子元素在交叉轴两端对齐，子元素在交叉轴之间的间隔相等。
align-content：space-around
子元素在交叉轴两侧的间隔相等，子元素之间的间隔 比 子元素与边框的间隔 大一倍。
align-content：stretch（默认值）
如果子元素没有设置高度，子元素占满整个交叉轴。
弹性布局 子元素常用属性
子元素前后排列顺序order
子元素的 order 属性 控制子元素前后排列顺序，默认值为0，order 属性值越小越排在前面。
<html>
<head>
<style>
.box
width: 800px;
height: 500px;
border: 5px solid red;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.boxSelf
width: 200px;
height: 50px;
border: 5px solid red;
</style>
</head>
<body>
<div class="box">
<div class="boxSelf">1</div>
<div class="boxSelf">2</div>
<div class="boxSelf">3</div>
<div class="boxSelf">4</div>
<div class="boxSelf">5</div>
<div class="boxSelf">6</div>
<div class="boxSelf">7</div>
<div class="boxSelf">8</div>
<div class="boxSelf" style="order: -2">9</div>
<div class="boxSelf" style="order: -1">10</div>
</div>
</body>
</html>
flex-grow
子元素的 flex-grow属性， 设置子元素在 主轴剩余份额的 占比。
flex-shrink
当空间不够时，设置子元素的缩小比例
设置子元素的大小flex-basis
子元素的 flex-basis属性 用来 设置子元素 在 主轴 的大小 (水平方向为主轴 flex-basis属性控制的就是宽度，垂直方向为主轴 flex-basis属性控制的就是高度) ，flex-basis属性优先级高于width属性或height属性。
子元素在交叉轴上对齐方式align-self
子元素的align-self属性值 和 align-items属性值相同，只不过align-items是设置在父类容器上控制所有子元素在交叉轴的对齐方式，而align-self属性是单独设置在子元素上仅仅控制设置了 align-self属性的元素在交叉轴的对齐方式，align-self属性优先级高于 align-items属性。
【web前端】十分钟彻底弄懂 flex 布局
参考技术Aflex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：
其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。
使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。
主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。
item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。
注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。
flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。
flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。
决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：
决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：
决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：
决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：
该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：
item 的属性在 item 的 style 中设置，item 共有如下六种属性：
order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。
它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。
定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。
表示 item 在主轴上占据的空间，默认值为 auto。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。
align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。
以上是关于彻底搞懂弹性布局flex的主要内容，如果未能解决你的问题，请参考以下文章