前端——flex布局

news2024/9/27 7:26:49

flex布局——弹性布局

传统布局: 浮动定位行内块等

1. flex布局方法简单不需要计算能自动分配父级里面的子元素排版对齐方式等等

>flex布局可以适应不同屏幕布局

2. flex布局使用

- 给父级盒子 display: flex 开启弹性盒模型

- 子元素就会默认按照flex规范来进行横向排列

- 子元素不设置高度默认是占满父级盒子的高

子元素加起来的宽度大于父级盒子的宽时不会超出也不会换行 (父级: 1000 < 子总宽: 1200)

(子元素默认不会换行按照flex规范进行了等比例的缩放 300 现在变成 250 )

- 行内元素在父级flex里面可以支持高宽设置没写高默认是按flex规范来分配高不写默认占满整个父级高度宽度是由内容来决定的

3. flex布局属性

1.display: flex 开启弹性盒模型

2.flex-wrap: 控制子元素是否需要换行默认不换行 nowrap

3.flex-direction 控制主轴方向规定子元素排列方式

4.flex-flow 主轴方向和换行复合写法

5.justify-content 控制子元素在主轴对齐方式 x轴

6.align-items 控制子元素在侧轴对齐 y轴

7.align-content 控制子元素行与行之间对齐

示例1——x轴对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .wrap{
            display: flex;
            flex-wrap: wrap;

            /* 控制子元素在主轴的对齐方式  默认 左对齐   从主轴的起点位置开始  */
            justify-content: flex-start;

            /* 右对齐  主轴终点位置  */
            justify-content: flex-end;


            /* 子元素在主轴 居中对齐 */
            justify-content: center;

            /* 子元素两端对齐  中间的间隔均分  */
            justify-content: space-between;

            /* 子元素间隔相同  左右间隔相等   中间间隔会比外面的大一倍   中间间隔是两个递加在一起  平分一下  */
            justify-content: space-around;

            /* 所有子元素间隔平均分配 */
            justify-content: space-evenly;
            width: 1000px;
            height: 500px;
            border: 2px solid  red;
        }
        .wrap>p{
            width: 260px;
            height: 230px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
      <div class="wrap">
         <p>1</p>
         <p>2</p>
         <p>3</p>
         <p>4</p>
         <p>5</p>
         <p>6</p>
      </div>
</body>
</html>

效果：

示例2——控制子元素行与行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .list{
            display: flex;
            /* 子元素换行 */
            flex-wrap: wrap;
            /* 子元素间隔均分相等 */
            justify-content: space-evenly;

            /* 行与行之间对齐   起点位置对齐   上下行就没有间隔   */
            /* align-content: flex-start; */
            /* 副轴  终点对齐  底部对齐 */
            align-content: flex-end;

            /* align-items: flex-end; */

            /* 行与行之间 居中对齐 */
            align-content: center;

            /* 每行间隔平均分配 */
            align-content: space-around;

            /* 两端对齐  中间间隔均分 */
            align-content: space-between;

            /* 每行间隔相等 */
            align-content: space-evenly;
            width: 1000px;
            height: 700px;
            background-color: pink;
            margin: auto;
        }
        .list>li{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
     <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
     </ul>
</body>
</html>

效果：

子元素属性:

- order: 子元素展示顺序值越小越优先默认0

- flex-shrink 子元素在主轴不足缩放比例默认是1

- flex-grow 在主轴还有剩余空间给子元素分配剩下的空间增大子元素默认是0

- align-self 规定子元素自身在y轴的对齐方式默认是继承父级align-items

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            display: flex;
            width: 700px;
            height: 500px;
            background-color: pink;
        }

        .box1{
            /* order:  子元素展示顺序   默认0   */
            order: 1; 


            /* 在主轴还有剩余空间  给子元素分配剩下的空间  增大子元素   默认是0    */
            flex-grow: 1;
            width: 200px;
            height: 350px;
            background-color: red;
        }
        .box2{
            /* 缩放比例  默认为1    */
            flex-shrink: 1;
            width: 200px;
            /* width: 350px; */
            height: 400px;
            background-color: green;

            align-self: center;
        }

        .box3{
            order: -1; 


            /* 规定子元素  自身在y轴的对齐方式    默认是继承父级align-items*/
            align-self: flex-end;
            flex-grow: 1;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .box4{
            width: 200px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>
      <div class="wrap">
          <div class='box1'>1</div>
          <div class='box2'>2</div>
          <div class='box3'>3</div>
          <!-- <div class='box4'>4</div> -->
      </div>
</body>
</html>

效果：