作者：沸羊羊_

https://blog.csdn.net/weixin_42653522/article/details/106940004

Flex简介

页面布局的传统解决方案是基于盒状模型，使用 display属性+position属性+float属性，但对于特殊布局非常不方便。直到2009年，W3C提出了解决方案-----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，意味着，现在可以很安全的使用这项功能。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

其他布局

table布局

在实际的项目开发过程中，不建议用table进行布局。

缺点：

• table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。

• table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源(代码冗余)。

• 灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。

• 不利于搜索引擎抓取信息，直接影响到网站的排名。

优点：

• 兼容性好，容易上手。

float布局

float 属性定义元素在哪个方向浮动。

缺点：

• 脱离文档流，需要清除浮动，高度塌陷(float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素)。

优点：

• 兼容性好，比较简单。

absolute布局

relative属性：脱离文档流，但保留占位符，其偏移位置是相对于本身在正常文档流中时的位置

脱离文档流是说设置了relative属性之后，元素不在z-index:0;的正常文档流中，其z-index的值>0，但保留占位符，就是在正常文档流中位置保留着，后继元素不能占位，然后相对于本身正常位置进行偏移。

缺点：

• 脱离文档流，会导致后续元素全部脱离文档流，可用行差。

grid布局

Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，意味着它可以同时处理列和行。

Flex布局

容器属性

元素结构

<template>  <div class="body">    <div class="container">      <div class="one">onediv>      <div class="two">twodiv>      <div class="three">threediv>    div>  div>template><style scoped>.body {  margin: 0;  padding: 0;}.container {  width: 300px;  background: #999;  margin: 50px auto;}.one {  width: 100px;  height: 50px;  background-color: #375;}.two {  width: 100px;  height: 50px;  background-color: #854;}.three {  width: 100px;  height: 50px;  background-color: #489;}style>

使用flex布局

display:flex

因为flex布局默认主轴方向为 row ，以行为主轴，所以内容在主轴的起点和终点两根轴线之间。

改变主轴方向 - flex-direction属性

主轴方向：flex-direction: column;

把 主轴方向改为 column后，以列为主轴，行为交叉轴，所以内容在主轴的两根轴线之间。

主轴方向：flex-direction: column-reverse;

以列为主轴，将排列方式反转，以原点为起点。

改变换行方式 - flex-wrap属性

换行：flex-wrap:wrap;

换行：flex-wrap:wrap-reverse;

flex-flow属性(flex-directive和flex-wrap简写)

以行为主轴，换行：flex-flow:row wrap;

以行为主轴，不换行：flex-flow:row nowrap;

以列为主轴，换行：flex-flow: column wrap;

以列为主轴，不换行：flex-flow: column nowrap;

主轴对齐方式 - justify-content

行为主轴，左对齐(默认值): justify-content: flex-start;

行为主轴，右对齐: justify-content: flex-end;

行为主轴，居中: justify-content: center;

行为主轴，两端对齐，元素之间间隔相等: justify-content: space-between;

行为主轴，元素边框两侧间隔相等，元素之间间隔比元素边框间隔大一倍: justify-content: space-around;

列为主轴，左对齐(默认值): flex-direction: column; justify-content: flex-start;

列为主轴，右对齐: flex-direction: column; justify-content: flex-end;

列为主轴，居中: flex-direction: column; justify-content: center;

列为主轴，两端对齐，元素之间间隔相等: flex-direction: column; justify-content: space-between;

列为主轴，元素边框两侧间隔相等，元素之间间隔比元素边框间隔大一倍: flex-direction: column; justify-content: space-around;

交叉轴对齐方式 - align-items

列为交叉轴，左对齐(默认值): align-items: flex-start;

列为交叉轴，右对齐: align-items: flex-end;

列为交叉轴，居中: align-items: center;

列为交叉轴，以元素第一行文字基线对齐: align-items: baseline;

列为交叉轴，取消元素高度将占满整个容器高度(默认值): align-items: stretch;

行为交叉轴，左对齐(默认值): flex-direction: column; align-items: flex-start;

行为交叉轴，右对齐: flex-direction: column; align-items: flex-end;

行为交叉轴，居中: flex-direction: column; align-items: center;

行为交叉轴，以元素第一行文字基线对齐: flex-direction: column; align-items: baseline;

行为交叉轴，取消元素高度(默认值): flex-direction: column; align-items: stretch;

子元素属性

子元素属性 – order

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

.one {  order: 2;}.two {  order: 1;}.three {  order: 1;}

子元素属性 – flex-grow

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

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.one {  flex-grow: 1;}.two {  flex-grow: 2;}.three {  flex-grow: 1;}

子元素属性 – flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。数值越大，相对比例越小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

    负值对该属性无效。

// case 1.one {  flex-shrink: 3;}.two {}.three {}

// case 2.one {  flex-shrink: 0;}.two {}.three {}

子元素属性 – flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。

.one {  flex-basis: 500px;}.two {}.three {}

子元素属性 – flex

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

.one {  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

子元素属性 – align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

//子元素容器.container {  display: flex;  align-items: center;}.one {  align-self: flex-start;}.two {}.three {}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

更多前端分享，请关注：

前端路人甲