Flex布局详解与实战-优快云博客

本文链接：https://blog.youkuaiyun.com/sumatray/article/details/127105022

一、什么是Flex布局？

Flex(Flexible Box) ----- 弹性布局

基本概念：

容器（Flex Container）

元素项(Flex Item)

水平轴，横轴，主轴（main axis）

垂直轴，纵轴，交叉轴（cross axis）

Flex容器的属性

flex-direction ----- 容器内元素的排列方向
flex-wrap ---- 容器内元素的换行行为
flex-flow ----- direction和wrap的复合属性
justify-content ---- 元素在横轴上的对齐方式
align-items ----- 元素在纵轴上的对齐方式
align-content ----- 多行元素的对齐方向

二、Flex容器的属性

2.1 flex-direction ----- 容器内元素的排列方向

row(默认值) : 主轴为水平方向，从左到右

row-reverse : 主轴为水平方向，从右到左

column : 主轴为垂直方向，从上到下

column-reverse: 主轴为垂直方向，从下到上

2.2 flex-wrap ---- 容器内元素的换行行为

2.3 flex-flow ----- direction和wrap的复合属性

2.4 justify-content ---- 元素在横轴上的对齐方式

flex-start(默认值):左对齐

flex-end:右对齐

center:居中对齐

space-between:两段对齐，item之间的间隔想相等

space-around:每个item 两侧的间隔相等

2.5 align-items ----- 元素在纵轴上的对齐方式

stretch(默认值) : 占满整个容器的高度

flex-start: 与纵轴起点对齐

flex-end: 与纵轴终点对齐

center: 与纵轴中间对齐

baseline : 与基线对齐

2.6 align-content ----- 多行元素的对齐方向

stretch(默认值) :占满整个容器的高度
flex-start : 与纵轴起点对齐
flex-end : 与纵轴终点对齐
center: 与纵轴中间对齐
space-between:与纵轴两端对齐，item之间的间隔平均分布
space-around: 每根轴线两侧的间隔相等

<!doctype html>
<html lang="zh-CN">
  <head>
  
    <title>flex布局</title>
    <style type="text/css">
        .container{
            width: 110px;
            height: 110px;
            margin: 0 auto;
            background-color:blueviolet;
            display: flex;
            /* display: inline-flex; */

            /* 垂直方向  从上到下*/
            /* flex-direction: column; */

            /* 垂直方向  从下到上 */
            /* flex-direction: column-reverse; */
            
            /* 水平方向 从右到左 */
            /* flex-direction: row-reverse; */

            /* 水平方向 从左到右 */
            /* flex-direction: row; */

            /* 水平轴 水平居中对齐 */
            /* justify-content: center; */

            /* 水平轴 两端对齐 */
            /* justify-content: space-between; */

            /* 水平轴 每个item 两侧的间隔相等 */
            /* justify-content: space-around; */

            /* 水平轴 左对齐 */
            /* justify-content: flex-start; */

            /* 水平轴 右对齐 */
            /* justify-content: flex-end; */


            /* 垂直轴 占满整个容器的高度 */
            /* align-items: stretch; */

            /* 垂直轴 与纵轴起点对齐 */
            /* align-items: flex-start; */

            /* 垂直轴 与纵轴终点对齐 */
            /* align-items:flex-end */

            /* 垂直轴 与基线对齐 */
            /* align-items: baseline; */

    



        }
        .container div {
            width: 20px;
            height: 20px;

        }
        .first{
            background-color: beige;
        }
        .second{
            background-color: aqua;
        }
        .third{
            background-color: beige;
        }
    </style>
    </head>


    <body>
            <div class="container">
                <div class="first">1</div>
                <div class="second">2</div>
                <div class="third">3</div>
            </div>


    </body>

</html>

三、元素项的属性

order ---- 排序规则，越小越靠前排列
flex-grow ----- 放大（撑开）比例
flex-shrink --- 收缩比例
flex-basis ---- 水平方向的大小
flex ----- grow、shrink、basi的复合属性
align-self ---- 元素在纵轴上的对齐方式