css布局之弹性布局flex

最新推荐文章于 2024-07-21 21:06:06 发布

我又懂了

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量1.2k

点赞数

分类专栏： css基础知识

本文链接：https://blog.csdn.net/qq_39194067/article/details/102721807

版权

css基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 弹性布局作用

作用：弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好，而不需要像定位那样手动计算布局。

2.弹性布局的定义和属性

弹性布局是定义在一个父容器中，加上display：flex样式使父容器的布局方式成为弹性布局。父容器中的子元素都会成为行内块，默认所有子元素横向排列，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

弹性布局默认排列方式是子元素不换行，横向排列
 弹性布局的属性主要有：   
   flow-wrap：  nowrap（默认）：不换行。
              当所有子元素的宽度大于容器宽度时，每个子元素都会被挤压宽度；
  flow-wrap：  wrap： 换行，并且第一行在容器最上方；
  flex-direction: reverse：所有子元素反向排列 第一个在最后一个位置，第二个在倒数第二个位置。。。。。
  flex-direction:noreverse  不反向

3.弹性布局的布局方式

写法：在父容器中添加样式

    *定义父容器*
 1. **display：flex**；    
 主轴  即设置水平方向的对齐方式
 2. justify-content：；<flex-start|flex-end|center|space-between|
    space-around| space-evently>   
    交叉轴 即设置竖直方向的对齐方式
 4. align-items：<flex-start|flex-end|center| strech | baseline> ；

在这里插入图片描述

对齐方式说明：

主轴：
主轴是水平方向,一个弹性布局中可能会有很多个主轴和交叉轴以进行更加复杂的布局。水平方向默认从左到右即flex-start进行布局

flex-start ：水平方向从左到右对齐
flex-end ：水平方向从右到左对齐
center ：将所有子元素在水平方向集中，并且第一个子元素和最后一个子元素到父容器的左边和右边的间距是相等的。
space-between:两端的子元素左右对齐父容器，中间的元素之间距离相等。
space-around: 每个子元素都有一个相同的距离值。

       所以两个子元素之间距离是两倍的小距离  ，但是由于第一个元素的左边和最后一个元素的右边没有子元素，所以它们只会有一个小距离*

space-evenly: 每个子元素之间的距离相同（包括到父元素边框的距离也相同相等）

试例代码

<style>
    .father{
        width:450px;
        height: 250px;
        display: flex;
        *更改?对齐方式即可*
       justify-content: center;   
        background-color: rgb(133, 110, 110);
    }
    .one {
        width: 100px;
        height:50px;
        background-color: yellowgreen;
    }

    .two {
        width: 150px;
        height: 75px;
        background-color: coral;
    }
    .three {
        width: 50px;
        height: 55px;
        background-color: aqua;
    }
</style>

<body>
    <div class="father">
        <div class="one">第一个子元素</div>
        <div class="two">第二个子元素</div>
        <div class="three">第三个子元素</div>
    </div>

</body>