Flex布局

深山里的山鬼

于 2024-05-31 18:04:53 发布

阅读量337

点赞数 7

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_77822157/article/details/139359050

版权

一、flex布局与传统样式相比较，两者之间的不同点？

答：

Flex布局是CSS3中引入的一种新的布局方式，它提供了一种更加灵活和方便的方法来描述复杂的多项式布局。Flex布局的主要优点包括：

1. **更简洁的代码**：Flex布局通过减少属性数量来简化代码，提高了代码的可读性和可维护性。

2. **更强大的功能**：Flex布局支持更多的布局需求，例如，通过`align-items`属性可以实现对齐方式，而不仅仅是传统的`top`、`bottom`、`left`、`right`对齐方式。

3. **更好的响应式设计**：Flex布局可以更好地适应不同设备和屏幕尺寸，提高了响应式设计的效果。

4. **更丰富的选择器**：Flex布局提供了更多的选择器，例如，可以通过`flex`容器和`flex`项目来选择，而不仅仅是传统的`div`标签选择。

传统样式的主要优点包括：

1. **兼容性**：传统样式在大多数浏览器中都可以正常工作，而Flex布局在某些旧版本的浏览器中可能存在兼容性问题。

2. **灵活性**：传统样式提供了更多的控制选项，例如，可以通过`margin`、`padding`等属性来调整元素的位置和大小。

3. **可扩展性**：传统样式可以与现有的HTML结构和CSS规则兼容，因此可以更容易地扩展和维护。

总的来说，Flex布局和传统样式各有优缺点，具体使用哪种布局方式取决于具体的应用场景和需求。在大多数情况下，Flex布局提供了更加灵活和强大的布局能力，因此被广泛推荐使用。

二、代码展示部分

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
</head>
<body>
    <div class="container">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
    </div>

    <!-- <div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div> -->

    <script>
        //容器属性
        // flex-direction(四个属性)
        // row(默认水平)
        // column(垂直)
        // row-reverse(水平方向)
        // column-reverse(反向垂直)

        //justify-content
        // flex-start(默认左对齐)
        // flex-end(默认右对齐)
        // center(默认居中对齐)
        // space-between(两端对齐)
        // space-around(每个元素两侧的间隔相等)
        // space-evenly(每个元素两侧的间隔相等)

        // align-items 
        // flex-start(默认顶部对齐)
        // flex-end(默认底部对齐)
        // center(默认居中对齐)
        // stretch(拉伸)
        // baseline(文字基线)

        // flex-wrap 
        // wrap 换行
        // nowrap(不换行)
        // wrap-reverse(反向换行)

        // align-content 
        // flex-start(默认顶部对齐)
        // flex-end(默认底部对齐)
        // center(默认居中对齐)
        // space-between(两端对齐)
        // space-around(每个元素两侧的间隔相等)
    </script>
</body>
</html>

style.css

/* *{
    padding: 0px;
    margin: 0px;
} */
/* .container{
    display: flex;
}
.item{
    width: 200px;
    height: 200px;
    background:pink;
    margin: 10px;
} */

/* flex-direction */
/* .container{
    display: flex;
    flex-direction: column-reverse;
}
.item{
    width: 200px;
    height: 200px;
    background:pink;
    margin: 10px;
} */

/* justify-content */
/* .container{
    display: flex;
    justify-content: space-evenly;
}
.item{
    width: 200px;
    height: 200px;
    background:pink;
    margin: 10px;
} */


/* align-items */
/* .container{
    display: flex;
    flex-wrap: wrap;
    align-items:stretch;
}
.item1{
    width: 200px;
    height: 200px;
    background:pink;
    margin: 10px;
}
.item2{
    width: 200px;
    height: 300px;
    background:pink;
    margin: 10px;
}
.item3{
    width: 200px;
    height: 400px;
    background:pink;
    margin: 10px;
}
.item4{
    width: 200px;
    height: 500px;
    background:pink;
    margin: 10px;
} */

/* flex-wrap */
/* .container{
    display: flex;
    flex-wrap: wrap;
}
.item{
    width: 400px;
    height: 300px;
    background:pink;
    margin: 10px;
} */