Flex布局--必然的选择
这篇文章是我在阮一峰老师的flex布局教程下,按照自己的理解重写写一遍,以便增强理解。如果你来到这里最好去看一下阮一峰大神的Flex布局教程
正式开始自己的。
说起布局方式,大家首先要了解css3有哪些布局方式,这里就不一一详解了。网上一大堆,而且平时写css3的时候大家一般也都会用到。
Flex布局:
1.概念:flex布局,英文全称为:Flexible Box 也就是弹性盒子的意思。设置flex布局的元素叫做容器,其他的子元素叫做项目。恩,我之前还真不知道叫做项目,没注意过。在容器中存在着两根轴:主轴(水平)和交叉轴(垂直)。
然后我们先创建一个正常的li列表
<div>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
<li>fifith</li>
</ul>
</div>
在简单设置一下css样式,也不能太难看
div{
height: 500px;
width: 500px;
margin:0 auto;
background-color: #333;
}
ul{
padding: 20px;
box-sizing: border-box;
}
div li{
list-style: none;
display: block;
width: 200px;
height:50px;
text-align: center;
line-height: 50px;
font-size: 30px;
margin:10px;
}
li:nth-child(n){
background-color: #007aff;
}
li:nth-child(2n){
background-color: #8a6de9;
color: #fff;
}
最终展现在我们眼前的效果就是
这个留着备用,我们继续开始下面的流程。
2.作用在容器上面的6大属性
flex-direction
align-items
justify-content
align-content
flex-wrap
flex-flow
2.1首先看第一个flex-direction属性
在之前我们设置好得li列表上面我们做一下改动,给div增加新的样式,为了方便容易看,我就直接在之前的样式后面 继续为 div 下ul元素添加样式。
div ul{
display: flex;
}
看一下效果
从原本的横向排列,变成了纵向排列。而且之前我们设置的 每个li 的宽度已经不起作用了。当我们设置display:flex;的时候,主轴默认的方向是水平方向也就是我们看到的样子。所以我们可以通过改变主轴的方向来随意调整我们li的排列方式。
/*设置主轴方向为垂直方向*/
flex-direction: column;
/*设置主轴方向为垂直方向,从下往上*/
flex-direction: column-reverse;
/*设置主轴方向为水平方向,从左往右*/
flex-direction: row;
/*设置主轴方向为水平方向,从右往左*/
flex-direction: row-reverse;
flex-direction: inherit;
flex-direction有五个属性,也可以说四个,毕竟最后一个可以省去。我们只要记着两个就行,column代表着垂直方向,row代表着水平方向。
2.2、这里我们看一下flex-wrap属性。
上面我们看到,设置成flex布局之后,li的宽度发生了变化,而且没有换行,挤在了一起。给样式加上flex-wrap之后,看一下
div ul{
display: flex;
flex-wrap: wrap;
}
flex-wrap,默认是nowrap。不换行。所以就导致了我们之前的那种情况,现在我们设置成wrap,让他根据宽度来决定是否换行。这样一来,就和float一样了。而且更加方便。flex-wrap还有一个属性
div ul{
display: flex;
flex-wrap: wrap-reverse;
}
也就是颠倒个个。
2.3flex-flow也就是flex-direction和flex-wrap的结合体,没什么好说的啦!
2.4justify-content
div ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
也就是设置垂直方向的排列方式,center就是居中。另外还有其他属性space-between;space-around;这两个属性可以说是我经常用到的属性。
2.4align-item这个就是水平方向的设置了。也justify-content相对应。也就不举栗子了。
2.5align-content属性定义的是多根线轴的对齐方式。具体样式也上面那两位几乎一样的。
3、在项目上的6大属性。
order
flex-grow
flex-shrink
flex-basis
align-self
3.1、order,设置数值,数值越小越靠前。例如我们给最后一个li添加order属性。设置为-1,样式为
li:last-child{
order: -1;
}
可以看到第五个fifth排到了第一位!!这就很方便了。也很实用,说实话,我刚刚发现这个属性的时候就想发现新大陆一样激动(鬼知道哥伦布怎么想的)
3.2、flex-grow属性。设置放大比例,默认值是0,例如我们给最后一个li增加属性
li:last-child{
flex-grow:;
}
3.3、flex-shrink就是缩小比例了。这个就不多说了。
3.4、flex-basis属性则定义了在分配多余空间之前,项目占据的主轴空间。
3.5、flex属性就是结合体.....我不是很熟练。还是一个个写吧
3.6、align-self也就是一个特立独行的存在。改变自己的排列方式。
Flex布局--必然的选择的更多相关文章
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- flex布局的使用,纪念第一次开发手机网站
一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...
- 写给 Android 开发的小程序布局指南,Flex 布局!
一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- 神奇的Flex 布局
layout是css中的一个重点.传统的页面布局是盒子模型,依赖 display属性 ,position属性 , float属性.它对于那些特殊布局非常不方便,而且定位用多了会出现挺多的bug. 所以 ...
- 弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- flex布局之flex-grow和flex-shrink如何计算
此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 关于盒模型布局 如何实现两栏布局? (表格) 流式, 浮动, 定位 如何选择? 流式 > 浮动 > ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
随机推荐
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...
- Bootstrap 警告框(Alert)插件
警告消息大多来是用来向终端用户提示警告或确认的消息,使用警告框插件,您可以向所有的警告框消息添加取消功能. 用法 您有以下两种方式启用警告框的可取消功能. 1.通过data属性:通过数据添加可取消功能 ...
- shell脚本,awk实现跳过文件里面的空行。
1.用awk '{if(!NF ){next}}1' file11 实现对文件里面的空行进行跳过操作,并输出结果. 2. awk '{if(!NF || /^#/){next}}1' file11 实 ...
- 两台centos之间使用scp命令传输文件
1.将本地文件copy到远程 (1)复制文件 scp local_file remote_username@remote_ip:remote_folder 例如:将/usr/local/aa.png文 ...
- php v8js
本文整理自大神 Corz 1.php56 /datas/soft/php56/bin/php -v PHP (cli) #https://blog.csdn.net/lzm198707/article ...
- 学习python第二天 流程判断
while循环age_of_Jim = 56 count = 0 #开始计数while True: #循环代码 if count ==3:#如果次数=3 break#退出 guess_age = in ...
- [BSOJ2684]锯木厂选址(斜率优化)
Description 从山顶上到山底下沿着一条直线种植了n棵老树.当地的政府决定把他们砍下来.为了不浪费任何一棵木材,树被砍倒后要运送到锯木厂.木材只能按照一个方向运输:朝山下运.山脚下有一个锯木厂 ...
- HDU1272小希的迷宫
小希的迷宫 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一 ...
- P3398 仓鼠找sugar(树链剖分)
P3398 仓鼠找sugar 题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而 ...
- 递归查询子类sql
--通过父节点查询子节点 WITH TREE AS( SELECT * FROM Role WHERE RoleID = 4 -- 要查询的父 id UNION ALL SELECT Role.* F ...