前端——flex布局

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>

效果:

db9cc88d0b524cbeb242ade3cfdbeb4d.png

示例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>

效果:

dce8c2ffbe814bc381b1abc12dc07e6d.png

子元素属性:

- 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>

效果:

0728dc5df6fc4d6e8f0999089585ece6.png

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值