快速掌握flex布局

作者: seporga | 来源:发表于2019-11-01 11:51 被阅读0次

快速掌握flex布局
小程序实战Flex布局(1)简单的列表样式
CSS阶段五：flex伸缩盒模型，自适应布局
【web前端】十分钟彻底弄懂 flex 布局
flex.css：移动端 flex 布局
利用flex实现垂直水平居中
flex布局
20206月计划
flex-box弹性布局总结
初见FLEX

前言

flex布局简化了前端布局问题，例如垂直居中，水平居中等，且目前为止主流浏览器都支持了这种布局，特别是移动端的浏览器，支持度更好。下面是在can i use上查询的结果。从查询的结果来看，支持IE10及以上浏览器，移动端几乎全线支持！

image.png

一、flex布局是什么？

flex布局意思是“弹性布局”，块级元素和行内元素都可以设置为flex布局。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  ...
</div>

块级元素设置flex布局

.flex-container{
   display:flex;
   display: -webkit-flex; /* Safari */
   display: -ms-flex; /* IE10+ */
}

行内元素设置flex布局

.flex-container{
   display:-webkit-inline-box;
   display:-ms-inline-flexbox;  /* IE10+ */  
   display:inline-flex;  /* Safari */
}

二、flex布局基本概念

flex布局一般包含容器(flex-container)和若干个子元素（flex-item），布局上分为主轴和交叉轴。默认情况下，水平方向为主轴，垂直方向为交叉轴，可以通过设置flex-direction切换主轴和交叉轴（稍后会讲解如何切换）。flex布局的属性比较多，但可以归类为 容器属性 和 子元素属性，教程会先讲解容器的属性，然后讲解子元素的属性，这样比较容易理解和记忆！

图片来源于网络，侵权请告知删除

三、flex容器的属性

flex有6个属性可以设置，它们分别是：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

3.1 flex-direction属性

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

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

row(默认值)，水平方向为主轴，垂直方向为交叉轴，起点在左边。

image.png

row-reverse: 水平方向为主轴，垂直方向为交叉轴，起点在右边。

image.png

column，垂直方向为主轴，水平方向为交叉轴，起点在上边。

image.png

column-reverse，垂直方向为主轴，水平方向为交叉轴，起点在下边。

image.png

initial，初始值，和默认值效果一样，这里不再贴图。
inherit，继承父容器的值，主要在嵌套使用flex布局会用到，父容器设置什么，它就是什么，效果和上面的其中一种相同，这里不再贴图

3.2 flex-wrap属性

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

CSS样式

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

nowrap(默认值)，即使子元素总宽高超出也不换行（列）。

image.png

wrap，当子元素总宽高超出时自动换行（列）。

image.png

wrap-reverse，换行，第一行在下方（列的情况自行探索，不再贴图）。

image.png

initial、inherit的效果和上面介绍的一样，不再赘述！

3.3 flex-flow属性

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式。flex-direction 属性规定方向， flex-wrap 属性规定是否拆行或拆列。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

CSS样式

.flex-container{
  display:flex;
  flex-flow: flex-direction flex-wrap  | initial | inherit;
}

row wrap，表示水平方向，超出换行。

image.png

row nowrap，表示水平方向，超出不换行。

image.png

其他情况也是一样的，就是 flex-direction 和 flex-wrap 组合，这里不做过多赘述。

3.4 justify-content属性

justify-content属性用于设置主轴上元素的排列方式。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

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

flex-start（默认值），子元素靠容器开头排列。

image.png

flex-end，子元素靠结尾排列。

image.png

center，子元素居中排列。

image.png

space-between，两端对齐，子元素之间的间隔相等。

image.png

space-around，子元素的两边间隔相等。

image.png

3.5 align-items属性

justify-content属性用于设置交叉轴上元素的排列方式。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container{
  display:flex;
  height: 300px; /* 设置高度，才能看到效果 */
  align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

stretch (默认值)，子元素被拉伸以适应容器（1和2设置了高度，3没有设置高度，下同）。

image.png

center ，子元素在交叉轴上居中对齐。

image.png

flex-start 子元素在交叉轴上靠起始边对齐。

image.png

flex-end 子元素在交叉轴上靠结束边对齐。

image.png

baseline 子元素在交叉轴上根据字体的baseline对齐（1、2、3字体大小分别为20px、40px、60px）。

image.png

3.6 align-content属性

align-content规定flex-container有剩余空间时，如何分配给子元素。这个属性设置的是所有子元素的对齐方式，需要设置flex-wrap(wrap或wrap-reverse)，并且指定flex-container的高度（或宽度）才会生效。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
</div>

CSS样式

.flex-container{
  display: flex;
  background: #eeeeee;
  align-content: center;
  height: 300px;
  flex-wrap: wrap | wrap-reverse;
  align-content:  stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
}

stretch(默认值)，子元素被拉伸以适应容器（临时去掉了flex-item的高度）。

image.png

center，子元素（整体）在交叉轴上居中对齐（恢复flex-item的高度为100px，下同）。

image.png

flex-start，子元素（整体）向交叉轴起始位置对齐。

image.png

flex-end，子元素（整体）向交叉轴结束位置对齐。

image.png

space-between ，子元素行（列）向交叉轴两边对齐（建议亲自尝试，文字功底不好，描述得不好~）。

image.png

space-around ，子元素行（列）两边均分容器剩余空间（建议亲自尝试，文字功底不好，描述得不好~）。

image.png

四、子元素（容器）的属性

flex子属性有6个属性可以设置，它们分别是：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4.1 order属性

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

DOM结构

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">-1</div>
    <div class="flex-item">0</div>
    <div class="flex-item">未设置order</div>
</div>

CSS样式

.flex-container{
  display:flex;
}
.flex-item{
  order: number | initial | inherit;
}

number，可以设置任意数字，数字越小越靠前（和DOM的位置无关）。

image.png

4.2 flex-grow属性

flex-grow属性定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大；

DOM结构

<div class="flex-container">
  <div class="flex-item">0</div>
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item {
  flex-grow: flex-grow: number | initial | inherit;
}

number，可以设置任何大于等于0的数字，数字越大，分到的剩余空间比例就越大。

image.png

4.3 flex-shrink属性

flex-shrink属性定义了子元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效；

DOM结构

<div class="flex-container">
  <div class="flex-item">0</div>
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item {
  background: #b48882;
  flex-shrink: number | initial | inherit; 
}

number，数值越大，缩小比例就越大。

image.png

4.4 flex-basis属性

flex-basis属性用于设置子元素的伸缩基准值，默认值为auto，即元素本身的大小。如果子元素同时设置宽高和flex-basis属性，flex-basis的优先级更高。

DOM结构

<div class="flex-container">
  <div class="flex-item">width:100px</div>
  <div class="flex-item">flex-basis: 200px;</div>
  <div class="flex-item">flex-basis: 300px;</div>
  <div class="flex-item">flex-basis: 400px;</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item{
  flex-basis: auto | number | initial | inherit;
}

number，子元素设置的数值越大，占用剩余空间的比例越大。

image.png

4.5 flex属性

flex属性是flex-grow、flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex支持缩写，例如经常用到的：flex: 1，等价于flex: 1 1 0%。

DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
}
.flex-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 5px;
  flex: flex-grow [flex-shrink] [flex-basis]  | auto | none | 1 | 0 | initial | inherit;
}

flex:1，等价于flex: 1 1 0%

image.png

flex: 0，等价于 flex: 0 1 0%

image.png

flex: auto ，等价于flex: 1 1 auto

image.png

flex: none，等价于flex: 0 0 auto

image.png

当取值为一个具体值或百分比时，例如：flex: 0%等价于flex: 1 1 0%，设置的是flex-basis的值

image.png

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，例如：flex:2 3 等价于flex 2 3 0%（下图给第一个子元素设置flex:2 3）。

image.png

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1。例如：flex: 2 200px 等价于 flex: 2 1 200px（下图给第一个子元素设置flex:2 200px）。

image.png

4.6 align-self属性

align-self 允许单个子元素设置与其他项目不一样的对齐方式，默认值：auto。
DOM结构

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS样式

.flex-container {
  display: flex;
  background: #eeeeee;
  height:300px;
}
.flex-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  margin: 5px;
  align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

auto(默认值)，元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"

image.png

stretch ，元素被拉伸以适应容器（子元素2高度设置为auto，align-self设置为stretch）。

image.png

center，元素位于容器的中心(子元素2的align-self设置为center)。

image.png

flex-start，元素位于容器的起始位置（子元素2的align-self设置为center）。

image.png

flex-end，元素位于容器的结束位置（子元素2的align-self设置为end）。

image.png

baseline ,元素以自身文字基线为对齐方式，对齐到主轴中（子元素2align-self设置为baseline ，font-size:60px;height:auto）

image.png

最后，奉献一个九宫格布局的例子：https://codepen.io/linlif/pen/zYYRejb，效果图如下：

flex实现九宫格布局

本文完

参考资料:
30 分钟学会 Flex 布局
 Flex 布局语法教程

快速掌握flex布局
前言 flex布局简化了前端布局问题，例如垂直居中，水平居中等，且目前为止主流浏览器都支持了这种布局，特别是移动端...
小程序实战Flex布局(1)简单的列表样式
说明：重点掌握Flex布局的基本知识==>详情看教程 Flex 布局教程:语法篇(阮一峰) - CSDN博客效...
CSS阶段五：flex伸缩盒模型，自适应布局
flex/inlineflex 伸缩盒模型（快速布局利器）该元素即成为伸缩容器（flex container） ...
【web前端】十分钟彻底弄懂 flex 布局
用六个字概括 flex 布局属性：简单、方便、快速。一、简介 flex（flexible box：弹性布局盒模型...
flex.css：移动端 flex 布局
flex.css 快速布局什么是 flex.css css3 flex 布局相信很多人已经听说过甚至已经在开发中...
利用flex实现垂直水平居中
Flex布局简述 flex布局可以更加方便的适配移动端,做到快速灵活弹性化的自适应。实现方式效果图
flex布局
认识flex布局 flex布局（Flexible 布局，弹性布局）开启了flex布局的元素叫flex contai...
20206月计划
1，熟悉css常见布局，flex布局，移动端布局 2，掌握nuxt，配置，开发等等 3，vue剩下的文档看完 4，...
flex-box弹性布局总结
最近难得有空，总结一下flex布局相关知识点，如有错漏，请大神指点纠正，谢谢~ flex布局总结: 快速记忆主轴...
初见FLEX
FLEX布局一种新的布局方式，flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...