CSS学习笔记：flex布局
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>一、Flex布局简介<ul><li>1. Flex布局的主要作用</li><li>2. Flex布局应用场景</li></ul></li><li>二、Flex布局的使用<ul><li>1. Flex布局的两种相关元素</li><li>2. 父项属性<ul><li>2.1 flex- direction</li><li>2.2 justify-content</li><li>2.3 flex-wrap</li><li>2.4 align-items</li><li>2.5 align-content</li><li>2.6 flex-flow</li></ul></li><li>3. 子项属性<ul><li>3.1 flex</li><li>3.2 align-self</li><li>3.3 order</li></ul></li></ul></li></ul></div><p></p><p>参考资料：https://www.bilibili.com/video/BV1N54y1i7dG?p=4</p>
<h1 id="一flex布局简介">一、Flex布局简介</h1>
<h2 id="1-flex布局的主要作用">1. Flex布局的主要作用</h2>
<p>flex布局是flexible布局的缩写，字面意思就是<strong>弹性布局</strong>，它主要的作用是使用它可以非常方便地对html上的元素进行<strong>水平排布</strong>。</p>
<p>当flex布局还没有出现的时候，我们希望对网页元素进行水平布局往往是需要采用<strong>浮动（float）</strong>来实现的，但使用浮动会带来许多意想不到的问题：例如元素脱离标准流而造成<strong>父盒子坍缩</strong>，后面排列的元素需要使用<code>clear:both</code>等方式<strong>消除浮动来避免前面浮动元素带来的影响</strong>等等，此外浮动也<strong>没有提供使水平排列的元素等分父盒子的功能</strong>，程序员手动编写这样的功能费时费力，使我们编写页面过程中出现了许多不必要的麻烦。</p>
<h2 id="2-flex布局应用场景">2. Flex布局应用场景</h2>
<p>和前面所说的一样，Flex布局就是为了开发人员能够更简单地进行元素的排版而生的，可以看到，很多大网站上水平排布元素的方式都由float实现改成了flex实现，因而学习flex布局是有益且必要的。</p>
<p>b站的主页：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116214040183.png" alt="image-20211116214040183" style="zoom: 67%">
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116214113694.png" alt="image-20211116214113694" style="zoom: 50%">
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116214132953.png" alt="image-20211116214132953" style="zoom: 50%">
<p>jetbrains官网：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116214317067.png" alt="image-20211116214317067" style="zoom: 50%">
<p>从这些大网站上可以看出flex布局已经应用到了非常多的页面之上，熟练掌握Flex布局应该是当前前端开发人员的必备技能之一。</p>
<h1 id="二flex布局的使用">二、Flex布局的使用</h1>
<h2 id="1-flex布局的两种相关元素">1. Flex布局的两种相关元素</h2>
<p>Flex布局中，有两种相关的元素，一个是父元素（flex-container），即用于存放被放置元素的<strong>容器</strong>，例如上面b站和jetbrains官网上包围住所有小项目的父级元素；二是子元素（flex-item），即希望被有条理放置的<strong>各个元素项</strong>（通常是水平排列），即上面b站的每个选项和jetbrains官网上的各个介绍卡片。</p>
<p>因为布局的结果和父元素和子元素都相关，因此，我们需要分别对父元素和子元素分别进行设置才能得到想要的结果。</p>
<h2 id="2-父项属性">2. 父项属性</h2>
<table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex- direction</td>
<td>设置主轴的方向</td>
</tr>
<tr>
<td>justify-content</td>
<td>设置主轴上的子元素排列方式</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>设置子元素是否换行</td>
</tr>
<tr>
<td>align-content</td>
<td>设置侧轴上的子元素的排列方式(多行)</td>
</tr>
<tr>
<td>align-items</td>
<td>设置侧轴上的子元素排列方式(单行)</td>
</tr>
<tr>
<td>flex-flow</td>
<td>复合属性，相当于同时设置了flex-direction和flex-wrap</td>
</tr>
</tbody>
</table>
<h3 id="21-flex--direction">2.1 flex- direction</h3>
<p>在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴</p>
<ul>
<li>默认<strong>主轴</strong>方向就是<strong>x轴</strong>方向，水平向右</li>
<li>默认<strong>侧轴</strong>方向就是<strong>y轴</strong>方向，水平向下</li>
</ul>
<p>默认排列如下（从左到右）：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116220245325.png" alt="image-20211116220245325" style="zoom: 60%">
<p>此时修改<code>flex-direction</code>属性为：</p>
<pre><code class="language-css">.flex-container {
display: flex;
flex-direction: column; /*竖直排列*/
...
}
</code></pre>
<p>其作用是<strong>修改主轴为y轴</strong>，因此元素竖直排列，效果如下：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116220414047.png" alt="image-20211116220414047" style="zoom: 60%">
<p><code>flex- direction</code>的所有取值和效果：</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>row</td>
<td>从左到右（默认值）</td>
</tr>
<tr>
<td>column</td>
<td>从上到下</td>
</tr>
<tr>
<td>row-reverse</td>
<td>从右到左</td>
</tr>
<tr>
<td>column-reverse</td>
<td>从下到上</td>
</tr>
</tbody>
</table>
<h3 id="22-justify-content">2.2 justify-content</h3>
<p>作用是设置主轴上的元素排列，具体效果如下：</p>
<table>
<thead>
<tr>
<th>常用属性值</th>
<th>说明</th>
<th>效果</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>从轴的头部开始排列（默认值）</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116221728447.png" alt="image-20211116221728447" style="zoom: 50%"></td>
</tr>
<tr>
<td>flex-end</td>
<td>从轴的尾部开始排列</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116221751321.png" alt="image-20211116221751321" style="zoom: 50%"></td>
</tr>
<tr>
<td>center</td>
<td>在主轴居中对齐</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116221819658.png" alt="image-20211116221819658" style="zoom: 50%"></td>
</tr>
<tr>
<td>space-around</td>
<td>平分剩余空间</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116221844896.png" alt="image-20211116221844896" style="zoom: 50%"></td>
</tr>
<tr>
<td>space-between</td>
<td>先两边贴边，再平分剩余空间</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116222127751.png" alt="image-20211116222127751" style="zoom: 50%"></td>
</tr>
<tr>
<td>space-evenly</td>
<td>距离相等</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116221917472.png" alt="image-20211116221917472" style="zoom: 50%"></td>
</tr>
</tbody>
</table>
<h3 id="23-flex-wrap">2.3 flex-wrap</h3>
<p>可以发现，如果上面的元素如果再增加一个，绿色的容器的第一行就无法再装下了，但事实是怎样呢？</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116223009060.png" alt="image-20211116223009060" style="zoom: 60%">
<p>可以发现，加入这个元素之后，这个元素并没有放置在下一行，而是<strong>挤在了第一行</strong>，此外<strong>所有元素的宽度都被压缩</strong>了。</p>
<p>原因：默认情况下，item都排在一条线( 轴线) 上。flex-wrap属性定义 , flex布局中<strong>默认是不换行的</strong>（<code>flex-wrap</code>默认值为<code>no-wrap</code>）。</p>
<p>当排不下需要换行时，设置<code>flex-wrap: wrap</code>即可：</p>
<pre><code class="language-css">.flex-container {
flex-wrap: wrap;
...
}
</code></pre>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116223717094.png" alt="image-20211116223717094" style="zoom: 60%">
<h3 id="24-align-items">2.4 align-items</h3>
<p>作用：设置<strong>侧轴上</strong>子元素的排列方式（单行）</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
<th>效果</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>从上到下（默认值）</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116224309161.png" alt="image-20211116224309161" style="zoom: 50%"></td>
</tr>
<tr>
<td>flex-end</td>
<td>从下到上</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116224342988.png" alt="image-20211116224342988" style="zoom: 50%"></td>
</tr>
<tr>
<td>center</td>
<td>挤到一起居中（垂直居中）</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116224404149.png" alt="image-20211116224404149" style="zoom: 50%"></td>
</tr>
<tr>
<td>stretch</td>
<td>拉伸（子元素不能设置高度）</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116224536795.png" alt="image-20211116224536795" style="zoom: 50%"></td>
</tr>
</tbody>
</table>
<h3 id="25-align-content">2.5 align-content</h3>
<p>和<code>align-items</code>的作用非常类似，都是用于设置<strong>侧轴上</strong>子元素的排列方式，但<code>align-content</code>是用于设置多行子元素的排列（单行元素无效），并且还有侧轴两边贴边等的效果。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
<th>效果</th>
</tr>
</thead>
<tbody>
<tr>
<td>center</td>
<td>多行元素居中</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116231843242.png" alt="image-20211116231843242" style="zoom: 50%"></td>
</tr>
<tr>
<td>space-around</td>
<td>平分剩余空间</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116231935399.png" alt="image-20211116231935399" style="zoom: 50%"></td>
</tr>
<tr>
<td>space-between</td>
<td>先上下行贴边，再平分剩余空间</td>
<td><img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116231959612.png" alt="image-20211116231959612" style="zoom: 50%"></td>
</tr>
</tbody>
</table>
<h3 id="26-flex-flow">2.6 flex-flow</h3>
<p>可以一次设置<code>flex-direction</code>和<code>flex-wrap</code>两个属性，如：</p>
<pre><code class="language-css">.flex-container {
flex-flow: wrap column;
}
</code></pre>
<h2 id="3-子项属性">3. 子项属性</h2>
<table>
<thead>
<tr>
<th>属性名</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex</td>
<td>子项目占的份数</td>
</tr>
<tr>
<td>align-self</td>
<td>控制子项自己在侧轴的排列方式</td>
</tr>
<tr>
<td>order</td>
<td>属性定义子项的排列顺序(前后顺序)</td>
</tr>
</tbody>
</table>
<h3 id="31-flex">3.1 flex</h3>
<p>flex属性定义子项目<strong>分配剩余空间</strong>，用flex来表示<strong>占多少份数</strong>。</p>
<p>语法：</p>
<pre><code class="language-css">.item {
flex: <number>;
}
</code></pre>
<p>案例：模拟京东商城的搜索栏，即左右两个部分的宽度固定，而中间的宽度自适应。</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116233638692.png" alt="image-20211116233638692" style="zoom: 67%">
<pre><code class="language-html"><div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</code></pre>
<pre><code class="language-css">.flex-container {
...
display: flex;
}
.flex-container > div:nth-child(1) {
width: 100px;
height: 100%;
background-color: plum;
}
.flex-container > div:nth-child(2) {
background-color: salmon;
flex: 1; /*这里取了全部的剩余空间*/
}
.flex-container > div:nth-child(3) {
width: 100px;
height: 100%;
background-color: #6ad281;
}
</code></pre>
<p>效果：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116233902623.png" alt="image-20211116233902623" style="zoom: 60%">
<p>因为div1和div3分别占用了100px的宽度，而div2使用flex占据剩余空间，因此div2就占据了中间所有的空间。</p>
<p>此时改变页面的宽度，可以发现<strong>中间部分会自适应变化</strong>，而两边宽度不变。可见，使用flex布局非常容易就可以实现圣杯布局的核心部分。</p>
<p>因为flex可以按比例分，因此我们可以摆脱使用百分比分配的困扰：</p>
<pre><code class="language-css">.flex-container > div:nth-child(1) {
flex: 1;
background-color: plum;
}
.flex-container > div:nth-child(2) {
flex: 1;
background-color: salmon;
}
.flex-container > div:nth-child(3) {
flex: 2;
background-color: #6ad281;
}
</code></pre>
<p>效果如下：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116234458904.png" alt="image-20211116234458904" style="zoom: 60%">
<p>可以看到紫色和橙色各占用一份空间，而绿色占用了两份的空间。</p>
<h3 id="32-align-self">3.2 align-self</h3>
<p>作用：改变单个元素在侧轴上的排列。</p>
<p>初始效果：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116235116280.png" alt="image-20211116235116280" style="zoom: 60%">
<p>添加：</p>
<pre><code class="language-css">.flex-container > div:last-child {
align-self: flex-end;
}
</code></pre>
<p>效果：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116235205967.png" alt="image-20211116235205967" style="zoom: 60%">
<h3 id="33-order">3.3 order</h3>
<p>子元素的order值都默认是0，设置的order值越小，就排列在flex容器的越前面的位置。</p>
<p>初始：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116235408408.png" alt="image-20211116235408408" style="zoom: 60%">
<p>修改：</p>
<pre><code class="language-css">.flex-container > div:nth-child(3) {
order: -1;
}
</code></pre>
<p>效果：</p>
<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/image-20211116235545456.png" alt="image-20211116235545456" style="zoom: 60%"><br><br>
来源：https://www.cnblogs.com/CodeReaper/p/15564541.html
頁:
[1]