首页 › HTML论坛 › 【Web前端HTML5&CSS3】19-弹性盒简介

梁满根 發表於 2021-6-30 21:17:00

【Web前端HTML5&CSS3】19-弹性盒简介

<blockquote>
<p>笔记来源：尚硅谷 Web 前端 HTML5&amp;CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>弹性盒简介<ul><li>1、基本概念<ul><li>弹性盒</li><li>弹性容器</li><li>弹性元素</li></ul></li><li>2、弹性容器的属性<ul><li>主轴属性<ul><li>排列方式</li><li>自动换行</li><li>空白空间</li></ul></li><li>辅轴属性<ul><li>辅轴对齐</li><li>空白空间</li></ul></li><li>弹性居中</li></ul></li><li>3、弹性元素的属性<ul><li>伸展系数</li><li>缩减系数</li><li>基础长度</li><li>排列顺序</li><li>覆盖辅轴</li></ul></li></ul></li></ul></div><p></p>
<h1 id="弹性盒简介">弹性盒简介</h1>
<h2 id="1基本概念">1、基本概念</h2>
<h3 id="弹性盒">弹性盒</h3>
<p><code>flex</code>（弹性盒、伸缩盒）</p>
<ul>
<li>是<code>css</code>中的又一种布局手段，它主要用来代替浮动来完成页面的布局</li>
<li><code>flex</code>可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变</li>
</ul>
<h3 id="弹性容器">弹性容器</h3>
<p>要使用弹性盒，必须先将一个元素设置为弹性容器</p>
<p>我们通过<code>display</code> 来设置弹性容器</p>
<ul>
<li><code>display:flex</code> 设置为块级弹性容器</li>
<li><code>display:inline-flex</code> 设置为行内的弹性容器</li>
</ul>
<pre><code class="language-css">/* 设置弹性容器 */
display: flex;
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/5c1d885e5f11e55cf83de4828487003b.png" alt="flex" loading="lazy"></p>
<h3 id="弹性元素">弹性元素</h3>
<p>弹性容器的子元素是弹性元素（弹性项）</p>
<p>弹性元素可以同时是弹性容器</p>
<h2 id="2弹性容器的属性">2、弹性容器的属性</h2>
<p><strong>主轴与侧轴</strong></p>
<ul>
<li>主轴：弹性元素的排列方向称为主轴</li>
<li>侧轴：与主轴垂直方向的称为侧轴</li>
</ul>
<h3 id="主轴属性">主轴属性</h3>
<h4 id="排列方式">排列方式</h4>
<p><code>flex-direction</code> 指定容器中弹性元素的排列方式</p>
<ul>
<li><code>row</code>默认值，弹性元素在容器中水平排列（自左向右）</li>
<li><code>row-reverse</code> 弹性元素在容器中反向水平排列（自右向左）</li>
<li><code>column</code> 弹性元素纵向排列（自上向下）</li>
<li><code>column-reverse</code> 弹性元素反向纵向排列（自下向上）</li>
</ul>
<pre><code class="language-css">/* 设置弹性元素排列方式 */
flex-direction: column;
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/11729c6c2c818441f5089c3a3984a080.png" alt="flex-direction" loading="lazy"></p>
<h4 id="自动换行">自动换行</h4>
<p><code>flex-wrap</code> 设置弹性元素是否在弹性容器中自动换行</p>
<ul>
<li><code>nowrap</code> 默认值，元素不会自动换行</li>
<li><code>wrap</code> 元素沿着辅轴方向自动换行</li>
</ul>
<pre><code class="language-css">/* 设置弹性元素排列方式 */
flex-direction: row;
/* 设置自动换行 */
flex-wrap: wrap;
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c87e43a9db82a4f564f98dbdae47fcc4.png" alt="flex-wrap" loading="lazy"></p>
<p><strong>简写属性</strong></p>
<p><code>flex-flow</code> 是<code>wrap</code>和<code>direction</code>的简写属性</p>
<pre><code class="language-css">/* 简写属性 */
flex-flow: row wrap;
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/963e711b9a2217a1c34b1a08538ea795.png" alt="flex-flow" loading="lazy"></p>
<h4 id="空白空间">空白空间</h4>
<p><code>justify-content</code> 如何分配主轴上的空白空间（主轴上的元素如何排列）</p>
<ul>
<li>
<p><code>flex-start</code> 元素沿着主轴起边排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3ee816db158fb6b5d480172f9ac578c0.png" alt="flex-start" loading="lazy"></p>
</li>
<li>
<p><code>flex-end</code> 元素沿着主轴终边排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/bb526f4373ab471791217f20260dbbd1.png" alt="flex-end" loading="lazy"></p>
</li>
<li>
<p><code>center</code> 元素居中排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/0c54d451da26478557563813cbbcc77f.png" alt="center" loading="lazy"></p>
</li>
<li>
<p><code>space-around</code> 空白分布到元素两侧</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/954f8711b1e786fcc0834a064290c861.png" alt="space-around" loading="lazy"></p>
</li>
<li>
<p><code>space-between</code> 空白均匀分布到元素间</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/03d831ec631b993192edfd186e4c2396.png" alt="space-between" loading="lazy"></p>
</li>
<li>
<p><code>space-evenly</code> 空白分布到元素的单侧</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/110522935bd98f332cb9cf04380f563b.png" alt="space-evenly" loading="lazy"></p>
</li>
</ul>
<h3 id="辅轴属性">辅轴属性</h3>
<h4 id="辅轴对齐">辅轴对齐</h4>
<p><code>align-items</code>元素在辅轴上如何对齐</p>
<ul>
<li>
<p><code>stretch</code> 默认值，将元素的长度设置为相同的值</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/2af92a896e40671ca536a9ed39dc1c1b.png" alt="stretch" loading="lazy"></p>
</li>
<li>
<p><code>flex-start</code> 元素不会拉伸，沿着辅轴起边对齐</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/6ab8b213829111066f5cd0ad1fa70bb7.png" alt="flex-start" loading="lazy"></p>
</li>
<li>
<p><code>flex-end</code> 沿着辅轴的终边对齐</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9c5f3fff8119986aa076cbe5f3e778d9.png" alt="flex-end" loading="lazy"></p>
</li>
<li>
<p><code>center</code> 居中对齐</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/5448b556d848e25d86ea52c09222f8bf.png" alt="center" loading="lazy"></p>
</li>
<li>
<p><code>baseline</code> 基线对齐</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c33af4a7dc9c4e2ea1a978edcfad4e11.png" alt="baseline" loading="lazy"></p>
</li>
</ul>
<h4 id="空白空间-1">空白空间</h4>
<p><code>align-content</code> 如何分配辅轴上的空白空间（辅轴上的元素如何排列）</p>
<ul>
<li>
<p><code>flex-start</code> 元素沿着辅轴起边排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9508792eb1a11fe0af3d51f1d47bb584.png" alt="flex-start" loading="lazy"></p>
</li>
<li>
<p><code>flex-end</code> 元素沿着辅轴终边排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/13cf3c6ca7af292ddc5fb2279dc19839.png" alt="flex-end" loading="lazy"></p>
</li>
<li>
<p><code>center</code> 元素居中排列</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/d788195de72ec17c817338b220c2ea32.png" alt="center" loading="lazy"></p>
</li>
<li>
<p><code>space-around</code> 空白分布到元素两侧</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3809331c72ca666656b99b1983e0d473.png" alt="space-around" loading="lazy"></p>
</li>
<li>
<p><code>space-between</code> 空白均匀分布到元素间</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/4a28fd1069af8b43b103e48f4db7cecf.png" alt="space-between" loading="lazy"></p>
</li>
<li>
<p><code>space-evenly</code> 空白分布到元素的单侧</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/f07a0ca24286bb5c3c5c3caf5a8e7559.png" alt="space-evenly" loading="lazy"></p>
</li>
</ul>
<h3 id="弹性居中">弹性居中</h3>
<p>利用弹性盒对元素进行水平垂直双方向居中</p>
<pre><code class="language-css">justify-content: center;
align-items: center;
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/0f326ed5006e1aac8e7f9120cb02c8b4.png" alt="弹性居中" loading="lazy"></p>
<h2 id="3弹性元素的属性">3、弹性元素的属性</h2>
<h3 id="伸展系数">伸展系数</h3>
<p><code>flex-grow</code> 指定弹性元素的伸展系数，默认值为 0</p>
<ul>
<li>当父元素有多余空间的时，子元素如何伸展</li>
<li>父元素的剩余空间，会按照比例进行分配</li>
</ul>
<pre><code class="language-css">li:nth-child(1) {
background-color: #bfa;
flex-grow: 1;
}

li:nth-child(2) {
background-color: red;
flex-grow: 2;
}

li:nth-child(3) {
background-color: green;
flex-grow: 3;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/fe1e85d111f123fbdc490048947a7252.png" alt="flex-grow" loading="lazy"></p>
<h3 id="缩减系数">缩减系数</h3>
<p><code>flex-shrink</code> 指定弹性元素的收缩系数，默认值为 1</p>
<ul>
<li>当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩</li>
<li>缩减系数的计算方式比较复杂，缩减多少是根据 <em>缩减系数</em> 和 <em>元素大小</em> 来计算</li>
</ul>
<pre><code class="language-css">li:nth-child(1) {
background-color: #bfa;
flex-shrink: 1;
}

li:nth-child(2) {
background-color: red;
flex-shrink: 2;
}

li:nth-child(3) {
background-color: green;
flex-shrink: 3;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/19f06ff1e9a81a0838ab6f1cdfc607a0.png" alt="flex-shrink" loading="lazy"></p>
<h3 id="基础长度">基础长度</h3>
<p><code>flex-basis</code> 指定的是元素在主轴上的基础长度</p>
<ul>
<li>如果主轴是横向的，则该值指定的就是元素的宽度</li>
<li>如果主轴是纵向的，则该值指定的就是元素的高度</li>
<li>默认值是<code>auto</code>，表示参考元素自身的高度或宽度</li>
<li>如果传递了一个具体的数值，则以该值为准</li>
</ul>
<pre><code class="language-css">li:nth-child(1) {
background-color: #bfa;
flex-basis: 200px;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/4ebbe412b98a6bda2cdcf8a95e6687b1.png" alt="flex-basis" loading="lazy"></p>
<p><strong>简写属性</strong></p>
<p><code>flex</code>可以设置弹性元素所有的三个样式 <code>flex: 增长 缩减 基础</code></p>
<ul>
<li><code>initial</code>：<code>flex: 0 1 auto</code></li>
<li><code>auto</code>：<code>flex: 1 1 auto</code></li>
<li><code>none</code>：<code>flex: 0 0 auto</code> 弹性元素没有弹性</li>
</ul>
<h3 id="排列顺序">排列顺序</h3>
<p><code>order</code> 决定弹性元素的排列顺序</p>
<pre><code class="language-css">li:nth-child(1) {
background-color: #bfa;
order: 2;
}

li:nth-child(2) {
background-color: red;
order: 3;
}

li:nth-child(3) {
background-color: green;
order: 1;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9946555125edbfac6ed4bad5db916027.png" alt="order" loading="lazy"></p>
<h3 id="覆盖辅轴">覆盖辅轴</h3>
<p><code>align-self</code> 用来覆盖当前弹性元素上的<code>align-items</code></p>
<pre><code class="language-css">li:nth-child(1) {
background-color: #bfa;
align-self: flex-end;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/088ae6940229c340026c918928f9607e.png" alt="image-20210627134055587" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/vectorx/p/14956440.html

查看完整版本: 【Web前端HTML5&CSS3】19-弹性盒简介