CSS学习笔记(八) 弹性布局
<p>关于弹性布局的教程，网上已经有很多很多写得比较详细的，所以这里就不再细说啦</p><p>这篇文章将会把常用的属性整理出来，就当作是一个速查手册吧，方便以后使用</p>
<h3 id="1基本概念">1、基本概念</h3>
<ul>
<li>
<p>设置 <code>display: flex;</code> 的元素称为 <strong>Flex 容器</strong>，其中所有的子元素称为 <strong>Flex 项目</strong></p>
</li>
<li>
<p>容器存在两根用于定位的轴，分别是水平的 <strong>主轴</strong> 和垂直的 <strong>交叉轴</strong>，项目默认沿主轴排列</p>
</li>
</ul>
<h3 id="2容器属性设置在容器上">2、容器属性（设置在容器上）</h3>
<ul>
<li>
<p><strong>flex-direction</strong>：设置主轴的方向，可选值如下</p>
<ul>
<li>row（默认）：主轴沿水平方向，起点在左边</li>
<li>row-reverse：主轴沿水平方向，起点在右边</li>
<li>column：主轴沿垂直方向，起点在上边</li>
<li>column-reverse：主轴沿垂直方向，起点在下边</li>
</ul>
</li>
<li>
<p><strong>flex-wrap</strong>：定义换行的方式，可选值如下</p>
<ul>
<li>nowrap（默认）：不换行</li>
<li>wrap：换行，第一行在上面</li>
<li>wrap-reverse：换行，第一行在下面</li>
</ul>
</li>
<li>
<p><strong>justify-content</strong>：定义项目在主轴上的对齐方式，可选值如下</p>
<ul>
<li>flex-start（默认）：起点对齐</li>
<li>flex-end：终点对齐</li>
<li>center：居中对齐</li>
<li>space-between：两端对齐，项目之间间隔相等</li>
<li>space-around：两端对齐，项目两侧间隔相等</li>
</ul>
</li>
<li>
<p><strong>align-items</strong>：定义项目在交叉轴上的对齐方式，可选值如下</p>
<ul>
<li>flex-start：起点对齐</li>
<li>flex-end：终点对齐</li>
<li>center：居中对齐</li>
<li>baseline：项目的第一行文字的基线对齐</li>
<li>stretch（默认）：如果项目未设置 height 或者设置为 auto，那么项目占满容器的高度</li>
</ul>
</li>
</ul>
<h3 id="3项目属性设置在项目上">3、项目属性（设置在项目上）</h3>
<ul>
<li>
<p><strong>order</strong>：定义项目的排列顺序，属性接受一个整数，数值越小排列越前，默认为 0</p>
</li>
<li>
<p><strong>flex-grow</strong>：定义项目的放大比例，默认为 0，表示即使存在剩余空间，也不放大</p>
<p>如果所有项目设置为 1，并且还有剩余空间，那么它们将会等分剩余空间</p>
<p>如果一个项目设置为 2，其它项目设置为 1，那么该项目占据的剩余空间将会比其它项目多一倍</p>
</li>
<li>
<p><strong>flex-shrink</strong>：定义项目的缩小比例，默认为 1，表示如果空间不足，就会缩小</p>
<p>如果所有项目设置为 1，并且空间不足，那么它们将会等比缩小</p>
<p>如果一个项目设置为 0，其它项目设置为 1，那么该项目不会缩小，而其它项目正常缩小</p>
</li>
<li>
<p><strong>flex-basis</strong>：在分配多余空间前，项目占据的主轴空间，默认为 auto，表示项目原来的大小</p>
</li>
<li>
<p><strong>align-self</strong>：定义项目的对齐方式，覆盖 align-items 设置，默认为 auto，表示继承父元素设置</p>
</li>
</ul>
<p>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】</p>
</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客属于个人维护博客，未经博主允许不得转载其中文章。<br><br>
来源：https://www.cnblogs.com/wsmrzx/p/11456509.html
頁:
[1]