弹性布局 - flex对齐

flex对齐

flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。

主轴 justify-content

?

justify-content对齐方式共有5种对齐方式：

flex-start ：主轴起点边缘开始，从左向右。

flex-end ：主轴终点边缘开始，从右向左。

center ：主轴中间开始，向两端伸缩。

space-between：主轴两端对齐。

space-around ： 与space-between区别就是起始端与结束端间隔相等。

交叉轴： align-content

align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

align-items

用于单行/单列对齐，沿主轴方向对齐。

flex-start ：主轴起点。

flex-end ：主轴终点。

center：主轴中间。

stretch ： 拉伸。

baseline：基线对齐。

自身对齐方式：align-self

用于单行（或单列），沿交叉轴方向对齐。

flex-start ：交叉轴起点。

flex-end ：交叉轴终点。

center：交叉轴中间。

stretch ： 拉伸。

baseline：基线对齐。

<div class="cnblogs_code">

    
    Title
    
        
        
                        左下角
            justify-content: flex-start;
            align-content: flex-end;

            右上角
            justify-content: flex-end;
            align-content: flex-start;
         </span><span style="background-color: #f5f5f5; color: #008000;"&gt;*/</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        justify-content</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; flex-end</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        align-content</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; flex-end</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">head<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="flexbox-row"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:coral;"<span style="color: #0000ff;">>A<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:lightblue;"<span style="color: #0000ff;">>B<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:khaki;"<span style="color: #0000ff;">>C<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:pink;align-self: flex-start;"<span style="color: #0000ff;">>D<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:lightgrey;"<span style="color: #0000ff;">>E<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">div <span style="color: #ff0000;">class<span style="color: #0000ff;">="box"<span style="color: #ff0000;"> style<span style="color: #0000ff;">="background-color:lightgreen;"<span style="color: #0000ff;">>F<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">div<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!