关于Web页面的布局

我最近在项目中用的比较多的还是flex布局，简单易用，功能强大

我们将一个元素的display属性设置flex，那么就可以将其转化为flex容器，但是，子元素的float，clear，vertical-align将会失效

举个例子：在app项目中的顶部导航栏，我们进行了flex的布局，该导航栏分为左，中，右三个部分

首先，给组件的root（根）添加display：flex 属性，使其变成flex容器，

我们给左，右设置一个固定的宽度，然后只需要给中添加上flex：1 就可以了，这样就实现了一个简单的flex布局，

flex容器的属性： flex-direction: column；将项目进行垂直显示，正如一个列一样

给子元素加上： flex-grow:1, 该子元素将会自动填充剩余空间

看下代码：　　　　　　　

　　　　　　 //css样式
　　　　　　　.container {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }

　　　　　　　　header,footer {
　　　　　　　　　　height: 100px;
　　　　　　　　　　background: #ccc;
　　　　　　　　}

            main {
                flex-grow: 1;
            }
　　　　　　　//dom标签

　　　　　　　　div class="container">
　　　　　　　　　　<header>header...</header>
　　　　　　　　　　<main>内容</main>
　　　　　　　　　　<footer>footer...</footer>
　　　　　　　　</div>

想要将一组图片链接均等的放在一条横线上，那么用flex就可以非常简单的实现，

首先我们设置一个flex容器，就是给外层div添加一个 display：flex属性，设置宽度为100%，text-align：center

然后给子元素添加一个flex：1的属性，就可以了，我们将图片放入到子元素下就好了

代码：

　　　　　　　　.isd {
　　　　　　　　　　 flex: 1;
　　　　　　　　　　}

　　　　　　　　.container {
　　　　　　　　　　width: 100%;
　　　　　　　　　　text-align: center;
　　　　　　　　　　display: flex;
　　　　　　　　}

　　　　　　　　.isd img{
　　　　　　　　　　width: 70px;
　　　　　　　　　　height: 65px;
　　　　　　　　　　margin-bottom: 6px;
　　　　　　　　　　border-radius: 100%;
　　　　　　　　}

　　　　　 <div class="container"> 
            <div class="isd">
                <img src="img/画图.jpg" />
            </div>

            <div class="isd">
                <img src="img/画图.jpg" />
                
            </div>

            <div class="isd">
                <img src="img/画图.jpg" />
                
            </div>

            <div class="isd">
                <img src="img/画图.jpg" />
            
            </div>

        </div>

效果图：

关于Web页面的布局

猜你喜欢