图解CSS3-flex布局
前言
最近笔者在复习以前基础知识,发现很多细的知识点还是需要重新再总结一番。本文对flex布局进行图解说明,以后忘了的同学可以随时过来查看,欢迎转载,烦请注明出处。
主体
万丈高楼平地起,熟悉flex,先来了解下以下7种css属性
1.
display: flex;
/* 设置父级元素flex模式 */
flex-direction: column;
/* 设置子级元素排列方式,主轴是哪一根(横/竖) */
flex-wrap: wrap;
/* 决定子级元素一行排列不下时,是否换行 */
flex-flow: row nowrap;
/* flex-direction和flex-wrap的综合体 */
justify-content: center;
/* 项目在主轴上的对齐方式 */
align-items: center;
/* 项目在侧轴上的对齐方式 */
align-content: space-between;
/* 多行项目的对齐方式 */
下面我们就对每个属性进行详细的探讨:
flex-direction
: 绝对主轴的方向
row
默认水平方向,起点在左边row-reverse
水平方向,起点在右边column
垂直方向,起点在上沿column-reverse
垂直方向,起点在下沿
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap
当项目在一条轴线上排不下时,是否换行
wrap
换行nowrap
(默认)不换行wrap-reverse
换行,第一行在最下面
display: flex;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow
:flex-direction
和flex-wrap
的集合,也就是说这个属性是后面两个属性的结合方式
row nowrap
(默认)水平方向,起点在左端,不换行
display: flex;
flex-flow: <flex-direction> || <flex-wrap>;
详细可参考如上单个属性的解释
justify-content
定义项目在主轴上的对齐方式
flex-start
左边对齐flex-end
右边对齐center
居中对齐space-between
两端对齐,空格在中间space-around
空格环绕
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around;
这里对space-between
和space-around
做一个简单的区别说明:
相同点:子元素都会自动排好,彼此之间距离相等
不同点:
space-between
两端对齐,第一个子元素和最后一个子元素会贴着父级元素的边框。space-around
第一个子元素和最后一个子元素与边框也会有一定的距离。align-items
项目在侧轴的对齐方式
flex-start
顶部对齐,即文字图片等顶部同一条线上flex-end
底部对齐,即文字图片等底部在同一条线上center
中间对齐,即文字图片不管多高,都拿它们的中间放在同一条线上stretch
将文字图片充满整个容器的高度,强制统一baseline
将每项的第一行文字做统一在一条线上对齐
display: flex;
align-items: flex-start | flex-end | center | stretch | baseline;
align-content
定义多行项目的对齐方式。如果只有一行项目,该属性不起作用
flex-start
这几行顶部对齐flex-end
这几行底部对齐center
这几行居中对齐stretch
这几行进行扩展或者缩放,从而填满容器高space-between
这几行中间使用空格进行填充(两端对齐)space-around
这几行用空格进行围绕(两边及中间)
display: flex;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
后缀
如果你觉得这个对你有帮助,欢迎转载,烦请注明出处。同时也欢迎大家在GitHub上和我一起进阶前端。
找到我:GitHub
找到我:知乎
图解CSS3-flex布局的更多相关文章
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- CSS3 Flex布局整理(一)
一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...
- CSS3 Flex布局(项目)
一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...
- CSS3 Flex布局(容器)
一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...
- css3 flex布局/grid布局
1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)
- CSS3 Flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- css3 flex 布局
今天做一个小实战,需要让一个登录框始终保持水平和垂直居中,第一个想到的就是通过定位(要想让一个div居中,采用定位可以解决,示例), 然后开始接触flex布局,学完感觉真的好用,现把知识点记录一下,以 ...
- css3 flex布局结合transform生成一个3D骰子
预览地址: https://zhaohh.github.io/flex-dice/index.html 1 Flex 布局 首先聊聊Flex 布局,Flex 布局又称"弹性布局", ...
随机推荐
- 团队项目第二阶段个人进展——Day10
一.昨天工作总结 冲刺第十天,做程序的测试,并修复一些小的bug 二.遇到的问题 无 三.今日工作规划 继续对程序进行测试优化
- 第一章 初识数据库Mysql
初识数据库Mysql(my) 在企业中 percona: 一.数据库基础知识 Mysql是一个开放源代码的数据库管理系统(DBMS),它是由Mysql AB公司开发.发布并支持的.Mysql是一个 ...
- Maven Scope 依赖范围
Maven依赖范围就是用来控制依赖与这三种classpath(编译classpath.测试classpath.运行classpath)的关系,Maven有以下几种依赖范围: ·compile:编译依赖 ...
- 闲聊 “今日头条Go建千亿级微服务的实践”
背景 今天跟同事偶然看到<今日头条Go建千亿级微服务的实践>文章,故做了一些探讨,与大家分享下,也欢迎大家多多共同探讨!. 其他资料: 如何理解 Golang 中“不 ...
- ARCGIS 数据格式
1. 开篇 刚开始接触 GIS 时,老师说过这样一句话"做我们这一行的,数据就是命,没有数据,什么都干不了".现在我们需要做一个 webgis 的小项目,体会到了这句阐述的精髓.数 ...
- Python_网页爬虫
import sys import multiprocessing import re import os import urllib.request as lib def craw_links( u ...
- PAT1002:A+B for Polynomials
1002. A+B for Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue T ...
- win7 中如何设置eclipse的背景色--Console
http://blog.csdn.net/u013161399/article/details/47297781
- echarts 专题
todo:缩放 5 分钟上手 ECharts 获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的 ...
- 用python对比两张图片的不同
from PIL import Image from PIL import ImageChops def compare_images(path_one, path_two, diff_save_lo ...