布局神器-Flex附例子

Flex弹性布局

基本概念

.box {
    display: flex;
}

对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性.

• 子元素自动成为容器成员flex项目
• 子元素的float、clear和vertical-align属性失效

容器属性

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

元素属性

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

主轴

水平主轴 main-axis，垂直交叉轴 cross-axis，注意：水平的不一定就是主轴
；每根轴都有起点和终点，用于元素的对齐；弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列；弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素

flex-direction

• 修改主轴的方向
• 如果主轴方向改了，交叉轴就会相应的旋转90°
• 弹性元素的排列方式也会改变，因为弹性元素是沿着主轴排列的
• flex-direction: row(默认) | row-reverse | column | column-reverse

flex-wrap

• 弹性元素沿着主轴排列，如果主轴排不下，则通过该属性设置
• flex-wrap: nowrap(默认) | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行
• rap-reverse反向折行，从容器底部开始折行，但每行元素之间的排列仍保留正向

flex-flow

• 复合属性，flex-flow = flex-direction + flex-wrap
• flex-flow: row nowrap

flex-wrap:nowrap不换行时，元素如何弹性伸缩？

flex-shrink

• 缩小比例（容器宽度<元素总宽度时如何收缩）
• flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度

flex-grow

• 放大比例（容器宽度>元素总宽度时如何伸展）
• 容器剩余宽度默认是不进行分配的，也就是所有弹性元素的flex-grow都为0
• 无多余宽度时，flex-grow无效

弹性处理与刚性尺寸

flex-basis

• 设置的是元素在主轴上的初始尺寸，就是元素在flex-grow和flex-shrink生效前的尺寸
• 同时设置width和flex-basis，flex-basis优先级高
• flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定
• flex-basis == 主轴上的尺寸 != width，将主轴方向改为：上→下，此时主轴上的尺寸是元素的height

常用的复合属性 flex

• flex = flex-grow + flex-shrink + flex-basis

flex: 1 = flex: 1 1 0%
flex: 2 = flex: 2 1 0%
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸 不伸缩

容器内如何对齐

justify-content

• 主轴上的对齐方式
• justify-content: flex-start(默认) | flex-end | center | space-between | space-around

交叉轴上的对齐方式

• 单行时（align-items）：
  • 默认值是stretch，当元素没有设置具体尺寸时会将容器在交叉轴方向撑满
  • 当align-items不为stretch时，此时除了对齐方式会改变之外，元素在交叉轴方向上的尺寸将由内容或自身尺寸（宽高）决定
  • align-items: stretch(默认) | flex-start | flex-end | center | baseline
• 多行时（align-content）
  • align-content: stretch | flex-start | flex-end | center | space-between | space-around
• 单独对某个元素设置交叉轴对齐方式
  • 值与align-items相同
  • 可覆盖容器的align-items属性
  • 默认值为auto，表示继承父元素的align-items属性

更优雅地调整元素顺序

order

• 可设置元素之间的排列顺序
• 数值越小，越靠前，默认为0
• 值相同时，以dom中元素排列为准

有趣经典的例子

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  /* 主轴上的对齐方式 */
  justify-content: center;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  /* 主轴上的对齐方式 */
  justify-content: flex-end;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  /* 主轴上的对齐方式 */
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  /* 改变主轴 */
  flex-direction: column;
  /* 主轴上的对齐方式 */
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  /* 单独对某个元素设置交叉轴对齐方式 */
  align-self: flex-end;
}

<ul class="container">
  <li></li>
  <li></li>
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  &:first-child{
    align-self: flex-start;
  }
  &:nth-child(2){
    align-self: center;
  }
  &:last-child{
    align-self: flex-end;
  }
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column-reverse;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column-reverse;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  align-self: center;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column-reverse;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  align-self: flex-end;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-around;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-around;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  align-self: center;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-around;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  align-self: flex-end;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  align-self: flex-end;
}

<ul class="container">
  <li></li>
</ul>

body {display: flex;}

ul,li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  display: flex;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #333;
  border-radius: 10px;
  justify-content: space-between;
}

.container li {
  height: 30px;
  width: 30px;
  background: #fff;
  border-radius: 50px;
  &:last-child {
    align-self: flex-end;
  }
}

未完待续…

参考

https://www.cnblogs.com/qcloud1001/p/9848619.html