CSS学习——flex布局
<p>学习内容来源：CSS Flexbox</p><h1 id="父元素flex-容器">父元素（flex 容器）</h1>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226140754850-324882533.png" alt="" loading="lazy"></p>
<blockquote>
<p>flex 布局中必须有一个 display 属性设置为 flex 的父元素。即上图中蓝色区域为父元素，也称作 flex 容器，数字1、2、3所在的 div 被称作 flex 项目。</p>
</blockquote>
<pre><code>// html代码
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
// css代码
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</code></pre>
<p>flex 容器属性如下：</p>
<ul>
<li>flex-direction</li>
<li>flex-wrap</li>
<li>flex-flow</li>
<li>justify-content</li>
<li>align-items</li>
<li>align-content</li>
</ul>
<h2 id="flex-direction-属性">flex-direction 属性</h2>
<blockquote>
<p>定义容器要在哪个方向上堆叠 flex 项目（默认设置为 row）</p>
</blockquote>
<p>1、column 值设置垂直堆叠 flex 项目（从上到下）：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226141839372-110547952.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-direction: column;
}
</code></pre>
<p>2、column-reverse 值垂直堆叠 flex 项目（但从下到上）：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226142539106-643970720.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-direction: column-reverse;
}
</code></pre>
<p>3、row 值水平堆叠 flex 项目（从左到右）：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226142706385-397707178.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-direction: row;
}
</code></pre>
<p>4、row-reverse 值水平堆叠 flex 项目（但从右到左）：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226142738469-227596977.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-direction: row-reverse;
}
</code></pre>
<h2 id="flex-wrap-属性">flex-wrap 属性</h2>
<blockquote>
<p>flex-wrap 属性规定是否应该对 flex 项目换行（默认设置为 nowrap）</p>
</blockquote>
<p>1、wrap 值规定 flex 项目将在必要时进行换行：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226142943958-1773092994.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-wrap: wrap;
}
</code></pre>
<p>2、nowrap 值规定将不对 flex 项目换行：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226143038015-13302431.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-wrap: nowrap;
}
</code></pre>
<p>3、wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226143314951-1782235413.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
</code></pre>
<h2 id="flex-flow-属性">flex-flow 属性</h2>
<blockquote>
<p>flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性</p>
</blockquote>
<p>例子：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226143831409-1328193801.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
flex-flow: row wrap;
}
</code></pre>
<h2 id="justify-content-属性">justify-content 属性</h2>
<blockquote>
<p>justify-content 属性用于对齐 flex 项目（默认设置为 flex-start）</p>
</blockquote>
<p>1、center 值将 flex 项目在容器的中心对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226144110014-80441665.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: center;
}
</code></pre>
<p>2、flex-start 值将 flex 项目在容器的开头对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226144206744-1687719364.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: flex-start;
}
</code></pre>
<p>3、flex-end 值将 flex 项目在容器的末端对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226144324052-1592520010.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: flex-end;
}
</code></pre>
<p>4、space-around 值显示 flex 项目两侧的留白间距相等：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226144434542-868507665.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: space-around;
}
</code></pre>
<p>5、space-between 值显示两端对齐， flex 项目之间间隔相等：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226144532761-1816908591.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: space-between;
}
</code></pre>
<p>6、space-evenly 值显示 flex 项目两侧的留白间距与两端的留白间距相等：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226145714269-1824257044.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: space-evenly;
}
</code></pre>
<h2 id="align-items-属性">align-items 属性</h2>
<blockquote>
<p>align-items 属性用于垂直对齐 flex 项目（默认设置为 stretch）</p>
</blockquote>
<p>1、center 值将 flex 项目在容器中间对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226145921632-993325288.png" alt="" loading="lazy"></p>
<pre><code>// css代码
<style>
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</code></pre>
<p>2、flex-start 值将 flex 项目在容器顶部对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226150703756-1624005295.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
</code></pre>
<p>3、flex-end 值将弹性项目在容器底部对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226151221777-757937938.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
</code></pre>
<p>4、stretch 值拉伸 flex 项目以填充容器：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226152224642-1740346313.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
</code></pre>
<p>5、baseline 值使 flex 项目基线对齐：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226152424415-982306093.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
// html代码
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div>
</div>
</code></pre>
<h2 id="align-content-属性">align-content 属性</h2>
<blockquote>
<p>align-content 属性用于对齐弹性线（默认设置为 stretch）</p>
</blockquote>
<p>1、space-between 值显示的弹性线之间有相等的间距：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226152655599-642339279.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
</code></pre>
<p>2、space-around 值显示弹性线在其之前、之间和之后带有空格：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226153450307-2142777199.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
</code></pre>
<p>3、stretch 值拉伸弹性线以占据剩余空间：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226153616093-251898681.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
</code></pre>
<p>4、center 值在容器中间显示弹性线：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226153745629-587960127.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
</code></pre>
<p>5、flex-start 值在容器开头显示弹性线：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226153835833-472510282.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
</code></pre>
<p>6、flex-end 值在容器的末尾显示弹性线：<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226153913632-393687041.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
</code></pre>
<h2 id="用-flex-实现居中">用 flex 实现居中</h2>
<blockquote>
<p>justify-content的 center 值将 flex 项目在容器的中心对齐，align-items的 center 值将 flex 项目在容器中间对齐，一个水平居中对齐，一个垂直居中对齐，然后 flex 项目就可以完美居中了</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226154805957-395944677.png" alt="" loading="lazy"></p>
<pre><code>// css代码
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
</code></pre>
<h1 id="子元素flex-项目">子元素（flex 项目）</h1>
<blockquote>
<p>flex 容器的直接子元素会自动成为弹性（flex）项目</p>
</blockquote>
<p>弹性项目属性如下：</p>
<ul>
<li>order</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
<li>align-self</li>
</ul>
<pre><code>// 整体的css代码
<style>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.flex-container>div {
background-color: DodgerBlue;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</code></pre>
<h2 id="order-属性">order 属性</h2>
<blockquote>
<p>order 属性可以改变 flex 项目的顺序（order 值必须是数字，默认值是 0）</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226155351021-1913974311.png" alt="" loading="lazy"></p>
<pre><code>// html代码
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
</code></pre>
<h2 id="flex-grow-属性">flex-grow 属性</h2>
<blockquote>
<p>flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少（该值必须是数字，默认值是 0）</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226155926771-289575132.png" alt="" loading="lazy"></p>
<pre><code>// html代码
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
</code></pre>
<h2 id="flex-shrink-属性">flex-shrink 属性</h2>
<blockquote>
<p>flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少（该值必须是数字，默认值是 0）</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226160058847-52081358.png" alt="" loading="lazy"></p>
<pre><code>// html代码
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</code></pre>
<h2 id="flex-basis-属性">flex-basis 属性</h2>
<blockquote>
<p>flex-basis 属性规定 flex 项目的初始长度（）</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226160436879-193954382.png" alt="" loading="lazy"></p>
<pre><code>// html代码
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
</code></pre>
<h2 id="flex-属性">flex 属性</h2>
<blockquote>
<p>flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性<br>
<img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226160706180-1704334011.png" alt="" loading="lazy"></p>
</blockquote>
<pre><code>// html代码
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
</code></pre>
<h2 id="align-self-属性">align-self 属性</h2>
<blockquote>
<p>align-self 属性规定弹性容器内所选项目的对齐方式。align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。</p>
</blockquote>
<p><img src="https://img2022.cnblogs.com/blog/2295298/202202/2295298-20220226161111199-1609928616.png" alt="" loading="lazy"></p>
<pre><code>// html代码
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
</code></pre><br><br>
来源：https://www.cnblogs.com/111K/p/15939554.html
頁:
[1]