css3弹性盒及其属性和视口的介绍

最新推荐文章于 2021-11-25 19:48:57 发布

原创最新推荐文章于 2021-11-25 19:48:57 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #弹性盒 #弹性布局 #视口 #html5

web前端专栏收录该内容

13 篇文章

订阅专栏

本文通过一个具体的实例详细介绍了如何使用HTML和CSS实现一个响应式的弹性布局。包括如何设置基本的HTML结构，利用CSS的Flexbox特性来调整不同屏幕尺寸下的布局表现，并通过具体的样式规则展示如何对齐和排列元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--设置视口-移动端必须写-->
    <!--宽度设置为设备宽度，缩放比例设为1，用户不可手动改变页面大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


<div class="container">
    <div class="item item1">001</div>
    <div class="item">002</div>
    <div class="item">003</div>
    <div class="item">004</div>
    <div class="item">005</div>
    <div class="item">006</div>
    <div class="item">007</div>
    <div class="item">008</div>


</div>

</body>
</html>

css代码：

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 16px;
}

.container{
    /*设置成弹性布局*/
    display: flex;
    /*弹性布局的四种方式，行、列、反转行、反转列*/
    /*flex-direction:row-reverse ;*/
    /*弹性布局的溢出处理 会自适应宽高*/
    /*flex-wrap: wrap-reverse;*/
    width: 80%;
    height: 800px;
    border: 1px solid red;
    box-sizing: border-box;
    margin: 0 auto;
    /*弹性盒的复合属性*/
    flex-flow: row wrap;
    /*设置子元素的水平对齐方式*/
    justify-content: space-around;
    /*!*设置子元素的垂直对齐方式*!*/
    /*align-items: center;*/
    /*设置子元素垂直的对齐方式*/
    align-content: space-around;

}
.item{
    /*width: 15rem;*/
    height: 13rem;
    background-color: #b368ff;
    border:5px solid #9dff1f;
    box-sizing: border-box;
    text-align: center;
    line-height: 13rem;
    font-size: 3rem;
}
.item:first-child{
    /*单个元素的垂直排列方式*/
    /*align-self: center;*/
    /*排序：按从小到大排序 order值笑的元素在前面*/
    order: 5;
    /*元素所占比例 占一份*/
    flex: 1;
}
.item:nth-child(2){
    order: 55;
    /*占五份*/
    flex: 5;
}
.item:nth-child(3){
    order: 25;
}
.item:nth-child(4){
    order: 33;
}
.item:nth-child(5){
    order: 357;
}
.item:nth-child(6){
    order: 5578;
}
.item:nth-child(7){
    order: 13;
}
.item:nth-child(8){
    order: 0;
}