页面常见布局以及实现方法--flex
页面布局是前端工程师的基本功之一，总结分析各种布局实现方法，可以让自己快速定位哪种方法实现功能，同时可以做到现最大程度的兼容。
一、水平居中
假设：最基本机构 .parent>.child
1、行内元素、文本元素、行内块元素
.parent{
text-align: center;
}
说明：只对行内元素有效；属性会继承影响到后代行内元素；
2、单个块级元素
#child{
width: 200px; /*必须定宽*/
margin: 0 auto;
}
说明：child必须定宽，并且值不能为auto；宽度要小于父元素，否则无效.
3、多个块级元素
.parent{
text-align: center;
}
.child{
display: inline-block;
}
说明：只对行内内容有效；属性会继承影响到后代行内内容；
4、定位+transform/定位+margin
#parent{
height: 200px;
width: 200px;
position: relative;
}
#son{
position: absolute;
left: 50%;
transform: translateX(-50%);
/*margin-left: -50px;*/
width: 100px;
height: 100px;
}
说明： 主要是transform兼容性不好，需要加上各种浏览器内核前缀；
5、flex布局
.parent{
display: flex;
justify-content: center;
}
说明：flex兼容性问题，比较合适用于移动端开发。
二、垂直居中
假设：最基本机构 .parent>.child
1、行内元素、文本元素、行内块元素
.parent{
height: 100px;
line-height: 100px;
}
说明：比较试用单行的内容
2、多行文本
.parent{
height: 100px;
line-height: 50px;
}
3、table-cell(单个块级元素)
.parent{
display: table-cell;
vertical-align: middle;
}
4、定位+transform/定位+margin
和上面水平定位差不多，只是换了一个轴；
5、flex布局
parent{
display: flex;
align-items: center;
}
或
.parent{
display: flex;
}
.child{
align-self: center;
}
说明：还是兼容性的缺点
三、水平垂直居中
<div class='parent'>
<div class=''child></div>
</div>
1、定位
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
2、定位+transform
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
right:50%;
transform:translate(-50%,-50%);
}
3、text-align+height +line-height
.parent{
text-align:center;
height: 100px;
}
.child{
line-height: 100px;
}
4、table-cell
.parent{
display: table-cell;
vertical-align: middle;
}
.child{
margin:auto;
}
四、单独讲讲flex布局
其实flex布局已经不是什么新鲜的事物了，早在2009年，W3C就提出了一种新方案，但是由于各种浏览器兼容性的问题，这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件，看了其中的源代码，发现它里面就使用了flex布局，草草看了一下，也知道大概意思，但是之后的项目一直没有机会使用，我也就没有再关注过。前端时间去看看这种方案的兼容性，95%以上已经完美支持这种解决方案了。so。。。可以大胆的使用了。（有点坑的就是，IE10以下不支持，ios没问题，手机安卓4.3以下也不支持）
flex布局也叫弹性布局，相比传统的布局以及bootstrap的栅格布局，flex布局显得更加的灵活，代码写起来也更加的优雅。
任何一个容器都可以通过设置 display 为 flex/inline-flex 将其指定为Flex布局。对于设置了Flex布局的容器，子元素的 float、clear、vertical-align 属性将失效；但是，如果对这些子元素设置 position 定位，那么Flex属性的作用会失效。即按权重来说：position > flex > flot/clear/vertival-align;
直接插入主题，怎么使用flex使元素居中？
首先先明确基本概念：任何的容器都可以指定flex布局，容器里面的子元素自动成为容器的成员，也叫项目，flex item
.parent{
display: flex;
display: -webkit-flex;
justify-content:center;
align-items:center;
}
简单几行，就可以使子元素完全居中于父元素中了。。。
接下来，再看看flex布局的其他使用情况。
我们可以把弹性布局想成一个可以朝四个方向拉伸的盒子。
容器元素有六个属性，分别是：
flex-direction
决定项目元素的排列方向,一般有四个值
row（默认值，主轴为水平方向，起点是左端，其他见名知意） | row-reverse | column | column-reverse;
flex-wrap
决定项目元素都在一条线上，一般有三个取值
nowrap（默认值，不换行） | wrap | wrap-reverse;
flex-flow
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content
定义了项目在主轴上的对齐方式。
flex-start （默认值）：左对齐| flex-end | center | space-between | space-around;
align-items
定义项目在交叉轴上如何对齐。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
拿来看个例子吧，如果ui给你这样的的设计稿，你怎么出来？
这样怎么排版？用什么办法？定位？？？其实我们可以尝试用flex的解决方案。看看效果，这么没有百分之百去还原，做了大概。
实现思路，给父元素加上下面的属性（已经最大程度考虑了浏览器的兼容性），然后给元素加上margin值就能达到上面的效果了。
.flex{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/*居中对齐*/
.flex-justify-center{
-webkit-box-pack:center;
-moz-justify-content:center;
-webkit-justify-content:center;
justify-content: center;
}
/*上下居中*/
.flex-align{
-webkit-box-align:center;
-moz-align-items:center;
-webkit-align-items:center;
align-items:center;
}
五、经典布局--两列布局
需求：左边宽度固定，右边宽度自适应
1、flex
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
width：100px;
}
.right{
background-color: red;
height: 200px;
flex:1;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
2、float+margin
<style>
div {
height: 200px;
}
.left {
float: left;
width: 100px;
background-color: rebeccapurple;
}
.right {
margin-left: 100px;
//直接用overflow：hidden触发BFC模式
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
3、table
<style>
.parent{
width: 100%;
display: table;
height: 500px;
}
.left,.right{
display:table-cell;
}
.left {
width: 100px;
background-color: rebeccapurple;
}
.right {
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
说明：利用单元格自动分配宽度
4、利用绝对定位
.parent{
position: relative; /*子绝父相*/
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 500px;
}
.right {
position: absolute;
top: 0;
left: 100px;
right: 0;
height: 500px;
}
5、float+overflow
.left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
.right {
background-color: #0f0;
height: 500px;
overflow: hidden;
}
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
6、Grid栅格布局
.parent {
width: 100%;
height: 500px;
display: grid; //声明
grid-template-columns: 100px auto;
}
.left {
background-color: red;
}
.right {
background-color: green;
}
说明：支持还不太好
MDN: CSS Grid Layout
六、总结
对于这类的学习，平时用到的时候，再去查对应的属性应用就可以了，更重要的是在学习一项新的东西之后，慢慢加入自己的体会，没在实践中去总结。
建议如果需求不太考虑低版本的兼容问题，可以大胆的使用flex和grid等方法，真的好用~。
页面常见布局以及实现方法--flex的更多相关文章
- CSS3与页面布局学习总结（四）——页面布局的多种方法
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的 ...
- 结合CSS3的布局新特征谈谈常见布局方法
写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局 在拿到设计稿时,作为一个前端人员,我 ...
- 几种常见布局的flex写法
flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算 ...
- flex大法：一网打尽所有常见布局
flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局. 先简单介绍 ...
- CSS常见布局解决方案
最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- htm的常见布局
布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现),希望能给需要的小 ...
- css常见布局问题
1.如何实现一个盒子在页面中上下左右居中 方法一:(盒子宽高固定时) .box{ width:400px; height:200px; background:#000; position:absolu ...
随机推荐
- 记录一下获取浏览器可视区域的大小的js
function GetPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) ...
- 用idea做springboot开发，设置thymeleaf时候，新手容易忽略误区
最近小编因为工作原因需要完成工厂自动化改造,而思来想去觉得还是用Java开发,因为很久没有敲过代码,对java这块已经抛掉很多年.作为工厂自动开发或者大型企业级开发,个人认为java和C#会比较合适, ...
- C# 调用微信接口的代码
调用微信接口前需要准备的内容. 1.微信公众平台的appid 2.微信公众平台的secret 3..获取tokenid 4.获取ticket 5.生成签名的随机串 6.生成签名的时间戳 7.生成签名 ...
- CSS精灵技术
在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...
- C#通过盘符获取剩余空间
public static long GetHardDiskSpace(string str_HardDiskName) { ; str_HardDiskName = str_HardDiskName ...
- C# 灵活用法拾遗
1.switch case : ; switch (a) { : Console.WriteLine("一"); break; : : Console.WriteLine(&quo ...
- SQL Server基础优化
1.先过滤简单且能筛选大部分数据出去的条件: 2.只查询有用的数据 不返回自己不需要的列,尽量不要使用select *: 不要返回自己不需要的行,尽量使用where条件来过滤自己需要的内容: 考虑使用 ...
- 机器学习、深度学习、和AI算法可以在网络安全中做什么？
本文由 网易云发布. 本文作者:Alexander Polyakov,ERPScan的首席技术官和联合创始人.EAS-SEC总裁,SAP网络安全传播者. 现在已经出现了相当多的文章涉及机器学习及其保 ...
- Python 将一个已知的 utc时间字符串 转换为东八区时间
先获取一个utc格式的时间 utc_time = datetime.datetime.utcnow() print(utc_time) 输出 2018-06-24T08:59:39Z 这里我们假设目前 ...
- jzoj5347
tj:80pts:維護f[i][j]表示當前第i個方塊必須選,且選了j個的最優解,設w[i]為第i個方塊長度 則可以枚舉上次選了第k個方塊,則f[i][j]=max{f[k][j-1]+w[i]*(i ...