网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display
属性 + position
属性 + float
属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
需要安卓4.4及以上版本可以使用display:-webkit-flex;,安卓4.4以下使用display:-webkit-box;
如需要更深入了解flex布局,请参考阮一峰博文——Flex 布局教程:实例篇
现在大部分浏览器都支持flexbox布局方法。react和react-native中几乎全部采用flex来布局。
布局导航菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局导航菜单</title>
<style>
body{
background: white;
font-family: 'Open Sans', sans-serif;
}
.main ul{
list-style: none;
display: flex; /*<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row*/
}
.main li{width:100px;}
.main a{
text-decoration: none;
font-size: 21px;
font-weight: 600;
color: #00a9d9;
}
.main a:hover{text-decoration: underline;}
</style>
</head>
<body>
<nav class="main">
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>
<!--
flex会让<ul>这个容器成为一个具有flex功能的block-level容器,并且会影响到它的子元素的布局表现。
如果想让<ul>成为一个inline元素,可以写成display: inline-flex,这样它仍然具有flex container的效果,同时也表现为一个inline元素,就像<img>一样。
当加上display: flex;后,<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row,如果我们添加上flex-direction:column,
<li>元素又变为了垂直排列
-->
效果如下:
早期时候我们做网站布局的使用表格(table),然后使用浮动(float)、 定位(position)和内联块(inline-block),但所有这些方法本质上来讲都是hacks,存留了很多需要实现的重要功能问题(例如,垂直居中)。
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀;display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。
此外我还写了一个Flex布局的属性详解的文章详细的介绍了各种属性。
计算一个盒子占用的空间是 content + padding + border + margin
flexbox 布局即弹性盒子布局,它的特点是盒子本来就是并列的,只需要指定宽度
1.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style type="text/css">
html{width: 100%;height: 100%;} /*整个页面的居中*/
body{
width: 100%;
height: 100%;
display: flex; /*flex弹性布局*/
justify-content: center;
align-items: center;
}
#login{
width: 300px;
height: 300px;
border: 1px black solid;
display: flex;
flex-direction: column; /*元素的排列方向为垂直*/
justify-content: center; /*水平居中对齐*/
align-items: center; /*垂直居中对齐*/
}
</style>
</head>
<body>
<div id="login">
<h1>登陆</h1>
<input type="text"><br>
<input type="password"><br>
<button>确定</button>
</div>
</body>
</html>
输出结果:
2.例子
一个经典的三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 布局</title>
</head>
<style>
.container{
height:200px;
width: 200px;
display: flex
}
.left{
background-color: red;
flex: 1;
}
.middle{
background-color: yellow;
flex: 1;
}
.right{
background-color: green;
flex: 1;
}
</style>
<body>
<div class=container>
<div class=left></div>
<div class=middle></div>
<div class=right></div>
</div>
</body>
</html>
输出结果:
有时我们可能需要两边定宽,中间自适应,那么可以这样写:
.left{
background-color: red;
width: 20px;
}
.middle{
background-color: yellow;
flex:;
}
.right{
background-color: green;
width: 20px;
}
输出结果:
网页布局——Flex弹性框布局的更多相关文章
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- css笔记 - flex弹性盒布局
flex: display:-webkit-box | -moz-box;盒布局 -webkit-box-flex | -moz-box-flex;弹性盒布局 -webkit-box-ordinal- ...
- flex弹性盒子布局
一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...
- css3 flex弹性盒子布局梳理,打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- 网页布局——grid弹性网格布局
网格布局(Grid)是最强大的 CSS 布局方案. Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计. grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它 ...
- Flex 弹性盒子布局使用教程
本文转载于<https://blog.csdn.net/lyznice/article/details/53981062>
- 前端入门5-CSS弹性布局flex
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
随机推荐
- fastjson使用-- @JSONField使用(转)
@JSONField可以配置到字段和方法上,那不同的配置有什么不同呢?下面我们就来看看具体配置到不同的方法上. 我们在创建实体类的时候,都要求属性必须创建get和set方法,否则fastjson将不会 ...
- Linux上安装JDK1.7步骤
1.使用SecurtCRT连接上Linux,把jdk的压缩包传递过去:(传递的方法在我的博客中也有写,参考之前的博客) 2.解压缩jdk:tar -zxvf jdk-7u55-linux-i586.t ...
- Java Web总结(一)-- 入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
- 人体行为识别(骨架提取),搭建openpose环境,VS2019(python3.7)+openpose
这几天开始接触人体行为识别,经过多方对比后,选择了现在最热的人体骨架提取开源库,openpose. 下面就不多说了,直接开始openpose在win10下的配置: 需求如下:1. VS2019 ...
- android 屏幕切换
1.将Activity固定位竖屏可以在配置文件这么写 <activity android:screenOrientation="portrait"> 横屏显示: < ...
- 【新】mybatis中大于等于小于等于的两种常用写法
mybatis中大于等于小于等于的写法 原符号 < <= > >= & ' " 替换符号 < <= > >= & &a ...
- Termux 高级终端安装使用配置教程
Termux 高级终端安装使用配置教程,这篇文章拖了有小半年.因为网上相关的文章相对来说还是比较少的,恰好今天又刷了机,所以就特意来总结一下,希望本文可以帮助到其他的小伙伴.发挥Android平台更大 ...
- linux文件系统分区、格式化、挂载、卷标挂载、永久挂载
思想不放松你的行为就不会放松,你的行为放松了,说明你的思想放松了.
- 30 (OC)* 数据结构和算法
在描述算法时通常用o(1), o(n), o(logn), o(nlogn) 来说明时间复杂度 o(1):是最低的时空复杂度,也就是耗时/耗空间与输入数据大小无关,无论输入数据增大多少倍,耗时/耗空间 ...
- Github 入门1 (下载git , 连接本地库与github仓库)
/* 本篇建立在以注册GitHub账号的前提下*/ (1) 下载 git https://www.git-scm.com // win10 可以直接红色箭头标识的 Download 2.22.0 ...