详解CSS3 弹性布局快速入门


Posted in HTML / CSS onJune 06, 2019

前言

弹性布局是新一代的布局方式,传统布局中使用浮动布局会给我们带来不少弊端,如CSS代码高度依赖于HTML代码结构等等,下面我将用几个例子让大家快速学会弹性布局。

PS:弹性布局适用于较简单的场景,过于复杂的场景可以尝试着使用CSS3的Grid布局,弹性布局在PC端中还存在兼容性问题,移动端中无兼容性问题,可以放心使用。

1.容器属性

css3为新增的弹性布局提供了多个属性,分别为弹性盒模型的容器属性,以及弹性盒子中子元素的子元素属性。

1.1display

css3中为display新增了两个属性值,分别为flex、inline-flex

display:flex;           /*将容器声明为一个弹性盒模型且容器表现为块级元素*/
display:inline-flex;    /*将容器声明为一个弹性盒模型且容器表现为行内元素*/

容器display:block;

详解CSS3 弹性布局快速入门

容器display:flex;

详解CSS3 弹性布局快速入门

此时弹性盒模型内的子元素变得类似浮动后的布局,这里要引入弹性盒模型中两条重要的轴线,分别为主轴和垂直轴,如下图所示,弹性盒模型内的子元素默认按照主轴的方向排列。

详解CSS3 弹性布局快速入门 

1.2flex-direction

flex-direction可以设置主轴的方向,默认值为row。

flex-direction:row | row-reverse | column | column-reverse

详解CSS3 弹性布局快速入门

理解两条轴线至关重要,搞定轴线之后后面就是简单的使用属性了。

1.3flex-wrap

.box {
    width:500px;
    height:500px;
    margin:100px auto 0 auto;
    background: #eee;
    display: flex;
    flex-direction: row;
}
.box-item {
    width:200px;
    height:200px;
    line-height:200px;
    text-align: center;
    color:#fff;
    font-size:20px;
}

从上面可以看出容器的宽高都是500px,子元素的宽高都是200px,那如果我们一行放3个元素,元素会像浮动布局那样换行吗?

详解CSS3 弹性布局快速入门

并没有,同时我们发现了,现在一个子元素的宽度只有166.66px,三个子元素没有换行同时自动等比例缩放至放好可以在容器中放下。 flex-wrap就是控制弹性盒模型的子元素换行方式的,默认值为nowrap。

flex-wrap:nowrap | wrap | wrap-reverse

  • flex-wrap:nowrap; /*不换行,等比例缩小*/
  • flex-wrap:wrap; /*自动换行*/
  • flex-wrap:wrap-reverse; /*自动反方向换行,往下换行变成往上换行*/

详解CSS3 弹性布局快速入门 

1.4justify-content

justify-content控制主轴的对齐方式,默认向主轴开始起点位置对齐,值为flex-start。

justify-content:flex-start | flex-end | center | space-between | space-around

  • justify-content:flex-start; /*向主轴开始位置对齐*/
  • justify-content:flex-end; /*向主轴结束位置对齐*/
  • justify-content:center; /*主轴居中对齐*/
  • justify-content:space-between; /*等间距对齐,两端不留空*/
  • justify-content:space-around; /*等间距对齐,两端留空,每个元素左间距与右间距大小相等,具体见下图*/

详解CSS3 弹性布局快速入门 

详解CSS3 弹性布局快速入门 

1.5align-items

align-items控制垂直轴的对齐方式,默认向主轴开始起点位置对齐,值为flex-start。

align-items:flex-start | flex-end | center | baseline | stretch

  • align-items:flex-start; /*向垂直轴开始位置对齐*/
  • align-items:flex-end; /*向垂直轴结束位置对齐*/
  • align-items:center; /*垂直轴居中对齐*/
  • align-items:baseline; /*文本基线对齐,用的不多*/
  • align-items:stretch; /*垂直轴方向上的height/width若值为auto,则自动填满,但依然受到min/max-width/height的控制。不设置弹性盒模型时,height默认值为内容区大小,若设置为弹性盒模型且align-items设置为stretch,则高度占满整个父容器*/

详解CSS3 弹性布局快速入门 

详解CSS3 弹性布局快速入门 

1.6align-content

刚刚说完了垂直轴只有一个元素的情况,若垂直轴有两个元素时,align-items还能起作用吗? 为了使垂直轴存在两个元素,我们首先设置自动换行

flex-wrap:wrap;

详解CSS3 弹性布局快速入门

从图中可以看到,这不是我们想要的效果,我们想要的效果是垂直轴方向上的两个元素紧贴着的。

这时我们要用align-content。 align-content:flex-start | flex-end | center | space-between | space-around

  • align-content:flex-start; /*向主轴开始位置对齐*/
  • align-content:flex-end; /*向主轴结束位置对齐*/
  • align-content:center; /*主轴居中对齐*/
  • align-content:space-between; /*等间距对齐,两端不留空*/
  • align-content:space-around; /*等间距对齐,两端留空,每个元素上间距与下间距大小相等,具体见下图*/

详解CSS3 弹性布局快速入门 

详解CSS3 弹性布局快速入门

垂直轴只有一行元素时使用align-items属性,有多行元素时使用align-content属性。

2.子元素属性

2.1order

order属性可用于设置子元素的位置,order的值越小排在越前面,默认值为0,可以设置负值。

//设置第三个子元素的order为-1
.box-item3 {
	background: green;
	order:-1;
}

详解CSS3 弹性布局快速入门

通过为每一个子元素设置order值可以使得布局不依赖于html的结构。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
CSS list-style-type属性使用方法
May 21 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 #HTML / CSS
移动端rem布局的两种实现方法
Jan 03 #HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 #HTML / CSS
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php session应用实例 登录验证
2009/03/16 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python字符串与url编码的转换实例
2018/05/10 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
电气个人求职信范文
2014/02/04 职场文书
房产继承公证书
2014/04/09 职场文书
职务任命书范本
2014/06/05 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
大学生团日活动总结
2015/05/06 职场文书
捐款仪式主持词
2015/07/04 职场文书
Python类方法总结讲解
2021/07/26 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript