flex盒子布局 - 通过主轴和侧轴学习对齐方式

旧城等待， 2023-06-25 03:24 48阅读 0赞

CSS Flexible Box Layout 就是css的弹性盒子布局，简称flex布局，相对于box布局来说，功能更多一些，使用起来也相对灵活。

## 先了解一下方向轴的概念 ##

主轴（main axis）和侧轴（cross axis），其中侧轴也可以翻译成交叉轴。

主轴和侧轴的定义是通过定义flex-direction属性得来的，也就是说，你定义flex-direction为`row` 或 `row-reverse，那么主轴方向就是横轴，x轴。如果你定义flex-direction为column` 或 `column-reverse，那么你的主轴方向就是纵轴，y轴。`

![In this image the flex-direction is row which forms the main axis][]![format_png][]

了解主轴和侧轴的关系，有助于学习flex盒子布局的对齐方式，在阅读文档时也会有所帮助。

## 与主轴侧轴方向相关的对齐属于有哪些？ ##

*  align-content    【容器】堆栈伸缩行，flex-wrap为nowrap时，该样式无效
 *  align-items       【容器】侧轴上项目对齐方式
 *  align-self          【元素】侧轴上单个项目对齐方式
 *  just-content      【容器】主轴对齐

### align-content ###

定义在容器上的属性，控制侧轴方向上内容的对齐方式。

示例代码：[http://jsrun.pro/yrWKp][http_jsrun.pro_yrWKp]

> 注：该属性对单行弹性盒子模型无效。（即：带有 `flex-wrap: nowrap`），flex-wrap默认的属性就是nowrap，所以我们在学习align-content的时候要注意，一定要将flex-wrap的默认值改掉。

### align-items ###

定义在容器上的属性，align-self的容器层面的属性，与align-self效果一致。

### align-self ###

定义在元素上的属性，控制单个元素的对齐方式，覆盖容器上align-items的属性值。

### just-content ###

定义在容器上的属性值，控制容器主轴方向上内容的对齐方式。

## 示例代码 ##

可以看到下面的示例图片中，头像与右边的信息是横向展示，网名文字和QQ图标用了居中对齐。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>使用flex布局的列表页面</title>
        <style>
            .list {
    
            }
            .item {
                display: flex;
                flex-direction: row;
                align-items: stretch;
    
                flex-wrap: nowrap;
    
                border-bottom:1px solid #f0f0f0;
    
                padding:10px;
                box-shadow: 0px 0px 1px 0px rgba(255,0,0,.3);
                margin-bottom:10px;
            }
            .avatar .image{
                width: 80px;
                height: 80px;
                display: block;
                border-radius: 40px;
                box-shadow: 0px 0px 7px 0px rgba(0,0,0,.5);
    
                margin-right:10px;
            }
            .detail{
                font-size:14px;
                color:#636363;
            }
            .name{
                display:flex;
                align-items: center;
                margin-bottom:5px;
            }
            .text{
                font-size:16px;
            }
            .icon{
                height:30px;
                display:block;
            }
    
        </style>
    </head>
    <body>
    
    <div class="list">
        <div class="item">
            <div class="avatar">
                <img class="image" src="http://img3.imgtn.bdimg.com/it/u=1368451564,780267377&fm=11&gp=0.jpg" style=""/>
            </div>
            <div class="info">
                <div class="name">
                    <div class="text">
                        独守空城忆旧梦
                    </div>
                    <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
                </div>
                <div class="detail">
                    任何时候都要记得，给人生留点余地，得到时不自喜，失去时不抑郁。留一点好处让别人占，留一点道路让别人走，留一点时间让自己思考。
                </div>
            </div>
        </div>
    
        <div class="item">
            <div class="avatar">
                <img class="image" src="http://img0.imgtn.bdimg.com/it/u=4009057249,2530456353&fm=26&gp=0.jpg" style=""/>
            </div>
            <div class="info">
                <div class="name">
                    <div class="text">
                        对你微笑纯粹出于礼貌ˇ
                    </div>
                    <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
                </div>
                <div class="detail">
                    胆量不够大，能力再强都是小人物！魄力不够大，努力一生都是小成就！在成长的路上，我们突破的不是现实，而是自己。在人生的跑道上，战胜对手，只是赛场的赢家，战胜自己，才是命运的强者。
                </div>
            </div>
        </div>
        <div class="item">
            <div class="avatar">
                <img class="image" src="http://img0.imgtn.bdimg.com/it/u=1813762643,1914315241&fm=26&gp=0.jpg" style=""/>
            </div>
            <div class="info">
                <div class="name">
                    <div class="text">
                        ☆⌒糖罐子℡
                    </div>
                    <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
                </div>
                <div class="detail">
                    不忘初心，方得始终。只有走过弯路，才更确信当初最想要的是什么。有些事，想多了头疼，想通了心疼。人生旅途，不是每一段旅行都要邂逅，也不是每一段生命都需要故事，就算多数时间都是一个人孤单且平淡在走，只要足够有爱，就不会寂寞。
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

[In this image the flex-direction is row which forms the main axis]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tZG4ubW96aWxsYWRlbW9zLm9yZy9maWxlcy8xNTcwOC9CYXNpY3MxLnBuZw?x-oss-process=image/format,png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tZG4ubW96aWxsYWRlbW9zLm9yZy9maWxlcy8xNTcwOS9CYXNpY3MyLnBuZw?x-oss-process=image/format,png
[http_jsrun.pro_yrWKp]: http://jsrun.pro/yrWKp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200605161057479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70