flex布局(1)
来源:互联网 发布:编程tourist 编辑:程序博客网 时间:2024/06/11 12:47
一、圣杯布局(网站中最常见的页面布局:主要有三个部分,分别是头部、主体部分、尾部,其中主体部分又分为三部分,下边我们用flex布局方式写一下:) <div class="main">
<header>header</header>
<div class="content">
<div class="nav">nav</div>
<div class="cont">cont</div>
<div class="new">new</div>
</div>
<footer>footer</footer>
</div>
css代码如下:
.main{
display:flex;
min-height:100Vh;
flex-direction:column;
border:1px #f00 solid;
}
.header,footer{
flex:1;
border:1 px #f0f solid;
}
.content{
flex:1;
display:flex;
}
.nav,.new{
background:#ccc;
flex: 0 0 120px;
}
.cont{
flex:1;
}
阅读全文
0 0
- Flex布局(1)
- flex布局(1)
- flex布局(弹性布局)
- flex布局(弹性布局)
- FLex布局详解---1
- flex布局1
- Flex布局(一)
- Flex布局(二)
- flex布局(一)
- flex布局(2)
- flex布局(3)
- flex布局(4)
- flex布局(笔记)
- flex布局(2)
- flex布局(3)
- flex布局篇(一)
- flex布局篇(二)
- flex布局(待看)
- Dropping water balloons UVA
- 解析接口返回的jason数据
- sqlite使用方法整理
- Java TCP/IP Socket 学习
- 找规律求和:有一分数列:2/1、3/2、5/3、8/5、13/8、21/13......求出这个数列的前20项之和。
- flex布局(1)
- sort-list
- ZigBee基础实验(六)--UART(串口收发)
- readlink命令
- 从iOS 11 UI Kit中谈谈iOS 11的新变化
- docker安装Jenkins
- JS和jquery获取各种屏幕的宽度和高度的代码
- c++ string类的使用
- php readline扩展安装