如何使用flex布局

在我们做前端页面的时候,是不是经常遇到让标签里面内容居中,左右对齐,上下对齐等等.

在之前,我们会浮动或者使用定位来进行布局.今天,这里介绍一种新的对齐方式,flex布局----弹性盒布局

一、了解flex布局

1.首先需要了解的是,flex布局在旧的浏览器上是不支持的,如今支持flex布局的浏览器大致有ie11以上,谷歌49以上

2.使用flex布局的容器,容器中有两条轴:水平的主轴与竖直的交叉轴

 二、使用flex布局步骤

1.创建flex容器,即给父级标签display:flex

2.明确布局,在父级标签添加属性

三、常见例子举例

1.让元素从左向右排列

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: flex;
    }
    .item{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
    </div>
</body>

只要父级用了display:flex,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中

2.让元素上下或者左右排列

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        flex-direction: column;//让元素上下排列
        /* flex-direction: row; //让元素左右排列 */
    }
</style>
<body>
    <div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
    </div>
</body>

上下排列

 

 3.让元素在主轴(水平)上两端对齐

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        justify-content: space-between;//让元素两段对齐
    }
    .item{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
    </div>
</body>

4.让元素自动换行(不挤压到子元素的宽度)

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        flex-wrap: wrap;//换行
    }
    .item{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
    </div>
</body>

 5.让元素在交叉轴(竖直方向)上居中

<style>
    div{
        width: 200px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        align-items: center;
    } 
    .item{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
</style>
<body>
    <div>
        <div class="item">你好</div>
        <div class="item">哈哈</div>
    </div>
</body>

四、补充

使用 flex 容器内元素，它们的 float，clear、vertical-align 属性将会失效

下面附上常见的属性表:

 

 

 

posted @ 2022-10-16 17:06  Tmillion  阅读(854)  评论(0)    收藏  举报