有趣的Flex布局
对于刚接触前端的小白,在还原页面样式的时候,往往会遇到页面布局(layout)上的问题,用着生硬的padding来固定盒子的位置,不仅代码看的沉重,还得适应各种浏览器页面,始终没有办法做到统一。接下来,我来介绍一种能把布局写活的方法:Flex布局。
Flex布局是Flexible Box的缩写,意思是弹性布局。设为flex布局后,子元素的float(浮动)、clear(清除浮动)和vertical-align(垂直对齐方式)属性会失效。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。任何一个容器都可以指定为Flex布局(块级元素和行级元素)。
Flex有以下六种属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- flex-direction属性
flex-direction属性决定主轴方向,分别有四个值:row(默认值,左=>右)row-reverse(右=>左)column(上=>下)column-reverse(下=>上)。
当我们在容器里写入flex布局:display:flex,flex-direction属性会默认为row:
.father{
display: flex;
background-color: rgb(192, 185, 185);
}它的子元素我设置了四个:a,b,c,d(宽为200px,高为50px,颜色不同)。页面效果为下:
改变flex-direction属性的值:row-reverse,页面效果改变为:
当flex-direction属性的值变为column时,效果和不写入flex布局一样,及从上到下;column-reverse时则相反。
- flex-wrap属性
flex-wrap属性规定了
当布局内元素一行盛不下,如何换行。flex-wrap属性有三个值:nowrap(默认,不换行)wrap(第一行在上)wrap-reverse(第一行在下)。
同样是上面的例子,我把每个元素的宽度设置为500px,页面渲染为下:
打开布局我们看到:
它的样式自动调成页面可容纳宽度,这就是当flex-wrap属性nowrap默认下的效果。改变flex-wrap属性的值为wrap时,页面效果为下:
当第一行放不下时,转到第二行继续,依次排列。改变flex-wrap属性的值为wrap-reverse时,页面效果为下:
排列顺序为从左到右,从下到上,最后一行放不下,转到倒数第二行,依次排列。
- flex-flow属性
flex-flow属性包含flex-direction属性和flex-wrap属性,格式为:
.father{
display: flex;
flex-flow: row nowrap;
background-color: rgb(192, 185, 185);
}其中row为flex-direction属性的默认值,nowrap为flex-wrap属性的默认值,这两个值视页面需求更改。
- justify-content属性
justify-content属性定义了布局内元素在水平方向的对齐方式,其有五个值:flex-staet(默认值,左对齐)flex-end(右对齐)center(居中)space-between(两端对齐,元素之间间隔相等)space-around(每个元素两侧间隔相等)。
justify-content属性往往用在页面右侧按钮,输入框、图片等元素对齐方式。
在我接触的项目里,需要很多放置在页面右侧的按钮,如“新建”按钮,“删除”按钮等,此时我就会用justify-content属性调整按钮的位置,例如:
<div class="father">
<button>新建</button>
</div>这是一个新建按钮,我需要把它放置到页面的右侧,则我需要设置这个盒子的justify-content属性:
.father{
display: flex;
justify-content: flex-end;
background-color: rgb(192, 185, 185);
}此时按钮就出现在页面右侧。若按钮所在的同一水平的左侧有其他的元素,则可以改变justify-content属性的值为space-between,为下:
<div class="father">
<div class="a">a
</div>
<button>新建</button>
</div> .father{
display: flex;
justify-content: space-between;
background-color: rgb(192, 185, 185);
}页面效果为下:
然后改改样式就好了。
当使用space-around值时,系统会自己分析页面的宽度以及每个元素对应的位置,如果对页面效果不满意,还可以用padding设置间距。
- align-items属性
align-items属性定义布局里的元素在垂直水平的对齐方式。align-items属性有五个值:stretch(默认值,未设置高度时与父元素高度相同)flex-start(垂直向上对齐)flex-end(垂直向下对齐)center(垂直居中对齐)baseline(元素第一行文字对齐)
当布局里的每个元素设置了不同的高度时,align-items属性默认值会变为flex-start,效果为下:
我设置了父元素高度为300,子元素a,b,c,d高度分别为100,120,40,200。默认为向上对齐。当值变为center时,效果为下
为了实现文字对齐,我给这些元素设置了margin-top,分别为20,50,10,30。改变align-items的值为baseline,效果为下:
设置padding-top也可以,但是会改变原来元素的高度。
- align-content属性
若布局容器内有多行元素,则align-content属性起作用,若只有一行元素,则align-content属性不起作用。
align-content属性有六个值:stretch(默认值,所有行占满整个布局)flex-start(于布局顶部对齐)flex-end(于布局底部对齐)center(于布局高度中心对齐)space-between(于顶部和底部对齐,元素间隔相等)space-around(元素上下间隔相等)
align-content属性与justify-content属性类似,一个是水平对齐,一个是垂直对齐。
有趣的Flex布局的更多相关文章
- flex 布局 初次接触这个好使又不是特别好用的布局方法
刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- css flex布局
关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...
- FLEX布局的一些问题和解决方法
前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- flex布局示例
来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
随机推荐
- Django迁移数据库报错
Django迁移数据库报错 table "xxx" already exists错误 django在migrate时报错django migrate error: table 'x ...
- kubernetes实战篇之docker镜像的打包与加载
系列目录 前面我们讲到了使用nexus搭建docker镜像仓库,操作还是有点复杂的,可能有的童鞋仅仅是想尝试kubernetes功能,并不想在搭建仓库上花费过多时间,但是又想在不同的主机之间传递镜像. ...
- JS高级程序设计第2章--精简版
前言:这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第二章:在HTML中使用JavaScript 2.1 <script>元素: ...
- windows快速创建文本文档的几个方法快捷键和
1. 在平常使用电脑中要经常用到在左面创建文本文档txt最笨重的方法就是右键但是这样非常的慢,有没有什么快捷键呢 2. 快捷键 快捷键就是Win+R ,键入notepad 然后回车就可以编辑了 是不是 ...
- centos 5.2 php升级
# gedit /etc/yum.repos.d/utterramblings.repo [utterramblings] name=Jason's Utter Ramblings Repo base ...
- 简单说一下SS的原理
假设有主机A和B还有C.主机A是客户机,就是你的电脑,主机B是服务器,也就是位于日本的那台电脑.主机C是你需要访问的网站.在没有SS的情况下,数据传输的流程是:A-->C.在有SS的情况下,概括 ...
- Class(类)和 继承
ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰.更像面向对象编程的语法而已. //定义类 class Point { co ...
- 详解rel 属性及noflow
rel属性的意思是指: 当前页和指向页的关系. 而 rev 属性则指定从目标文档到源文档的关系.百度目前支持: rel='noflow'属性. rel属性的意思是指: 当前页和指向页的关系. < ...
- HashMap源码分析(二):看完彻底了解HashMap
上文讲到HashMap的增加方法,现在继续 上文链接 HashMap在上一篇源码分析的文章中,如果使用put的时候如果元素数量超过threshold就会调用resize进行扩容 1.扩容机制 想要了解 ...
- linux 定时任务 crontabs 安装及使用方法
boom 安装 crontab yum install crontabs centos7 自带了我没有手动去装 启动/关闭 service crond start // 启动服务 service cr ...