Flexbox弹性布局初识

弹性布局非常常用，必须掌握。

flex父容器属性

flex-direction属性：子项目排列方向
flex-warp：子项目多行
flex-flow子项目多行一起指定
justify-content: 水平对齐
align-items ：垂直对⻬
align-content : 多行对齐。只在多行有多行元素时起作用，单行元素不起作用

flex子项目

order
flex-grow 子项目延申比率

在这里插入图片描述
3. 其他属性

测试代码
html

<!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>Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <!-- <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div> -->
        <!-- <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div> -->
    </div>
</body>
</html>

css

body{
    
    
    background-color: azure;
}

.container{
    
    
    margin: 150px auto;
    max-width: 800px;
    height: 400px;
    padding: 20px;
    background-color: rgb(196, 229, 232);
    border: 10px solid rgb(0, 181, 203);
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    /* flex-flow: row-reverse wrap; */
    justify-content: space-around;
    /* align-items: baseline; */

}

.item{
    
    
    background-color: rgb(0, 181, 203);
    color: white;
    width: 100px;
    height: 100px;
    margin: 2px;
    font-weight: bold;
    font-size: 5em;
    text-align: center; 
}

.item-1{
    
    
    flex-basis: 200px;
    flex-shrink: 1;
}
.item-2{
    
    
    flex-basis: 200px;
    flex-shrink: 1;
}
.item-3 {
    
    
    /* font-size: 3em; */
    /* order: 1; */
    /* flex-grow: 2; */
    flex-basis: 200px;
    flex-shrink: 300;
}

Flexbox弹性布局初识

猜你喜欢