Flex 全面学习

achens
199 阅读4分钟

【导言】

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目。
HTML 中任何一个容器（div）都可以被指定为 Flex 布局。包括行内元素也可以使用 Flex 布局。

1. 基本概念。

.flex{
	/* 设置 display 值为 flex 开启弹性布局*/
  display: flex;
}

**Tips：**设置弹性布局后子元素的 float、clear、vertical-align 都将失效。

2. 父元素属性

1. 容器基本属性

  1. flex-direction：控制子元素显示方向
    • row：默认值，设置子元素成一行显示。
    • row-reverse：成行显示，但正反跌倒
    • column：成列显示。
    • column-reverse：成列显示，但正反跌倒。
.flex {
  flex-direction: row | row-reverse | column | column-reverse;
}
  1. flex-wrap：设置元素是否换行
    • nowrap：默认值，不换行，强制元素都在一行
    • wrap：内容超出自动换行。
    • wrap-reverse：自动换行，但上下跌倒。
.flex {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  1. flex-flow：flex-direction 和 flex-wrap 的简写模式
    • row：一行显示，且自动换行。
    • nowrap：一行显示，但不自动换行。
.flex {
	flex-flow: row | nowrap;
}

2. 子项目排序规则

  1. justify-content：定义子元素水平方向如何对齐
    • flex-start：默认值，从左对齐。
    • flex-end：从右对齐。
    • center：居中对齐。
    • space-between：子元素两端居中。
    • space-around：子元素等间居中。
.flex {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}
  1. align-items：定义子元素垂直方向项如何对齐
    • flex-start：默认值，对齐上方。
    • flex-end：对齐下方。
    • center：居中对齐。
    • stretch：占满整屏。
.flex {
	align-items: flex-start | flex-end | center | stretch;
}
  1. align-content：定义多根轴线的对齐方式
    • flex-start：与交叉轴的起点对齐，所有子元素全部垂直靠上。
    • flex-end：与交叉轴的终点对齐，所有子元素全部垂直靠下。
    • center：与交叉轴的中心点对齐，所有子元素全部垂直居中。
    • space-between：子元素垂直方向两端对齐。
    • space-around：子元素垂直方向等间对齐。
    • stretch：默认值，轴线沾满整个交叉轴。
.flex {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

2. 子元素属性

1. 设置子项自身对齐

  • align-self：定义子项单独在轴上的对齐方式。
    • auto：默认值，元素继承父容器的 align-items 属性，如果没有父容器则为 stretch。
    • stretch：占满整个屏幕。
    • center：元素居中。
    • flex-start：居于头部。
    • flex-end：居于尾部。
    • baseline：位于容器基线。
    • order：定义元素排列顺序，数值越小，排列越前。
.flex .items {
	align-self: auto | stretch | center | flex-end | baseline;
  /* 也可以单独定义子项排列顺序 */
  align-self: 1;
}

2. 设置子项空间分配规则

  1. flex-grow：通过数值自动分配剩余空间。默认值为 0。
  2. flex-shrink：如果空间不足，则自动缩放比例。默认值为 1（不能为负值）。
  3. flex-basis：定义子元素默认在主轴方向占据的空间大小。默认值为 auto（子元素本来大小）。
.flex .items {
	flex-grow: 0;
  flex-shrink: 1;
  flex-basii: auto;
}
  1. flex：是 grow、shrink、basis 缩写形式。
    • auto：grow：1，shrink：1，basis：auto。
    • none：grow：0，shrink：0，basis：auto。
    • initial：grow：0，shrink：1，basis：auto。
    • ：grow：，shrink：1，basis：auto。
.flex .items {
  /* 等同于：
    flex-grow：1; 
    flex-shrink：1; 
    flex-basis：auto; 
  */
  flex: 1;
}

3. 弹性布局实现骰子的六种形式

【序】骰子背景与骰子样式

.box {
  width: 104px;
  height: 104px;
  margin: 16px;
  padding: 4px;
  display: flex;
  background-color: #e7e7e7;
  box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5p 0 #d7d7d7,
    inset -5px 0 #d7d7d7;
  border-radius: 10%;
}
/* 黑点样式 */
.box .pip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;
  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px;
}

1. 单骰子

1. HTML

<div class="box" id="box1">
  <p class="pip"></p>
</div>

2. CSS

#box1 {
  /* 设置子项水平方向居中 */
  justify-content: center;
  /* 设置子元素垂直方向居中对齐 */
  align-items: center;
}

image.png

2. 双骰子

1. HTML

<div class="box" id="box2">
  <p class="pip pip1"></p>
  <p class="pip pip2"></p>
</div>

2. CSS

#box2 {
  /* 设置子元素两端布局 */
  justify-content: space-between;
}
#box2 .pip2 {
  /* 单独设置第二个骰子在最下方 */
  align-self: flex-end;
}

image.png

3. 三骰子

1. HTML

<div class="box" id="box3">
  <p class="pip pip1"></p>
  <p class="pip pip2"></p>
  <p class="pip pip3"></p>
</div>

2. CSS

#box3 .pip2 {
  /* 设置第二个骰子垂直居中 */
  align-self: center;
}
#box3 .pip3 {
  /* 设置第三个骰子位于布局最下方 */
  align-self: flex-end;
}

image.png

4. 四骰子

1. HTML

<div class="box" id="box4">
	<!-- 上方的两个骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
  </div>
	<!-- 下方两个骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
  </div>
</div>

2. CSS

#box4 {
  /* 设置骰子两端对齐 */
  justify-content: space-between;
}
#box4 .boxs {
  /* 设置子盒子也弹性布局 */
  display: flex;
  /* 设置骰子成列排序 */
  flex-direction: column;
  /* 并且两端对齐排列 */
  justify-content: space-between;
}

image.png

5. 五骰子

1. HTML

<div class="box" id="box5">
	<!-- 上方两个骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
  </div>
	<!-- 中间两个骰子 -->
  <div class="boxs" id="center">
    <p class="pip"></p>
  </div>
	<!-- 下方两个骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
  </div>
</div>

2. CSS

#box5 {
  /* 设置两端对齐 */
  justify-content: space-between;
}
#box5 .boxs {
  /* 设置子盒子弹性布局且成列排序 */
  display: flex;
  flex-direction: column;
  /* 设置子项内容两端对齐排列 */
  justify-content: space-between;
}
#box5 .boxs#center {
  /* 中间骰子居中对齐 */
  justify-content: center;
}

image.png

6. 横向六骰子

1. HTML

<div class="box" id="box6">
	<!-- 第一行骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
    <p class="pip pip3"></p>
  </div>
	<!-- 第二行骰子 -->
  <div class="boxs">
    <p class="pip pip4"></p>
    <p class="pip pip5"></p>
    <p class="pip pip6"></p>
  </div>
</div>

2. CSS

#box6 {
  /* 设置子项等间排序且自动换行 */
  justify-content: space-around;
  flex-wrap: wrap;
}
#box6 .boxs {
  /* 子项设置居中即可实现 */
  display: flex;
  align-items: center;
}

image.png

7. 竖向六骰子

1. HTML

<div class="box" id="box6s">
	<!-- 第一列骰子 -->
  <div class="boxs">
    <p class="pip pip1"></p>
    <p class="pip pip2"></p>
    <p class="pip pip3"></p>
  </div>
	<!-- 第二列骰子 --> 
  <div class="boxs">
    <p class="pip pip4"></p>
    <p class="pip pip5"></p>
    <p class="pip pip6"></p>
  </div>
</div>

2. CSS

#box6s {
  /* 同样等间排序 */
  justify-content: space-around;
}
#box6s .boxs {
  /* 设置两端对齐并换行 */
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

image.png

原文地址：www.yuque.com/docs/share/…

avatar
文章
阅读
粉丝