flex 布局学习 重要属性

本文深入探讨了Flex布局,特别是其核心属性,如`align-items`、`justify-content`和`align-content`。通过一个示例展示了如何使用这些属性来实现内容的灵活对齐。示例中,一个容器内的多行元素根据指定的属性实现了不同方向的对齐方式,包括交叉轴和横轴的对齐。此外,还特别提到了`align-self`属性,允许单个元素在交叉轴上有不同的对齐方式。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex 布局</title>
     <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #overview {
            width: 100vw;
            height:100vh;
            background-color: #201f1f;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            width: 400px;
            height: 400px;
            background-color: #8dd353;
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            /**
             * align-items 纵轴方向的对齐方式
             */
            align-items: start;
            /**
             * align-content 多行的时候的对齐方式 flex-start与justify-content:类似
             */
            align-content:start;
           
        
            
         
        }
        .row{
            background-color: #105ae6;
            padding:10px;
            height: 50px;
            text-align: center;
            border:2px solid #ccc;
            width: 33.333%;
        }
        .row:nth-child(1){
            background-color: #e2390e;
            height:100px;
           
        }
     </style>    
</head>
<body  id="overview">
    <div class="container">
        <div class="row">1</div>
        <div class="row">2</div>
        <div class="row">3</div>
        <div class="row">4</div>
        <div class="row">5</div>
        <div class="row">6</div>
        <div class="row">7</div>
        <div class="row">8</div>
    </div>
</body>
</html>

主要要记住 几个属性 

flex 作用与 盒子内容元素

是一维的

align-items 每个元素的align-self 作用于每个元素,可以使元素在交叉轴方向对齐。

justify-content 作用于 元素两端的对齐方式 两端对齐

align-content 作用于多行元素的横轴对齐方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值
>