32、flex布局 | 易学教程

html：

      <div class="parent">
            <div class="son">1</div>
            <div class="son">2</div>
            <div class="son">3</div>
            <div class="son">4</div>
        </div>

css：

         .parent{
             width: 600px;
             height: auto;
             border: 10px solid black;
             display: flex;
             /*flex-direction: row; //水平排列（默认）*/
             /*flex-direction: column; //垂直排列*/
             /*flex-wrap: wrap;//换行*/
             /*flex-wrap: nowrap;//不换行（默认）*/
             /*justify-content: center;//居中排列*/
             /*justify-content: flex-start //靠左排列*/
             /*justify-content: flex-end //靠右排列*/
             /*justify-content: space-between; //两端对齐,中间间隔相等*/
             /*justify-content: space-around; //每个元素两侧间隔相等,所以中间比两端间隔大一倍*/
             /*align-items: center; //在竖直方向居中*/
             /*align-items: flex-start;//在竖直方向顶部*/
             /*align-items: flex-end;//在竖直方向底部*/

         }
         .son{
             width: 100px;
             height: 100px;
             background: peachpuff;
             border: 1px solid black;
         }

css解析：

.parent{ flex-direction:row(默认) | row-reverse |  column | column-reverse; }

.parent{
   flex-wrap: nowrap(默认不换行) |wrap;}不换行效果图：

换行效果图：

.parent{   justify-content: center;//居中排列}居中排列效果图：

.parent{   justify-content: flex-start //靠左排列}

 flex-start：

.parent{   justify-content: flex-end //靠右排列}

flex-end：

.parent{   justify-content: space-between; //两端对齐,中间间隔相等}

 space-between：

.parent{   justify-content: space-around; //每个元素两侧间隔相等,所以中间比两端间隔大一倍}

space-around：

.parent{  align-items: center; //在竖直方向居中}

效果图：

.parent{   align-items: flex-start;//在竖直方向顶部}

flex-start：

.parent{   align-items: flex-end;//在竖直方向底部}

flex-end：

来源：https://www.cnblogs.com/xlfdqf/p/11314862.html

标签

flex布局