flexbox属性速览及常见布局实现
CSS3
弹性盒子(Flex Box)弹性盒子是即 CSS2
浮动布局后, CSS3
的一种新的布局模式。
CSS3
弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子父元素属性
创建弹性盒子
<style>
.flex-container {
display: flex;
width: 300px;
height: 200px;
}
</style>
<div class="flex-container">我是一个弹性盒子</div>
flex-direction设置子元素的排列方式
属性对照:
属性名 | 描述 |
---|---|
row | 横向从左到右排列(左对齐),默认的排列方式 |
row-reverse | 反转横向排列(右对齐,从后往前排,最后一项排在最前面 |
column | 纵向排列 |
column-reverse | 反转纵向排列,从后往前排,最后一项排在最上面 |
<style>
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
width: 300px;
height: 200px;
}
</style>
<div class="flex-container">我是一个弹性盒子</div>
justify-content设置子元素的水平对齐方式
属性对照:
属性名 | 描述 |
---|---|
flex-start | 左对齐(默认值) |
flex-end | 右对齐 |
center | 居中对齐 |
space-between | 子元素平均分布在该行上 |
space-around | 弹性项目平均分布在该行上,两边留有一半的间隔空间 |
<style>
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
</style>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
align-items 设置子元素的垂直对齐方式
属性对照:
属性名 | 描述 |
---|---|
flex-start | 上对齐 |
flex-end | 下对齐 |
center | 垂直居中对齐 |
baseline | 基线对齐 |
stretch | 父元素设置高度,自动填充高度对齐 |
<style>
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
align-items: flex-start | flex-end | center | baseline | stretch
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
</style>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
flex-wrap 指定弹性盒子的子元素换行方式
属性对照:
属性名 | 描述 |
---|---|
nowrap | 默认,弹性容器为单行 |
wrap | 弹性容器为多行 |
wrap-reverse | 反转 wrap 排列 |
<style>
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
</style>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
align-content 设置flex-wrap属性下子元素的行对齐
属性对照:
属性名 | 描述 |
---|---|
stretch | 默认。各行将会伸展以占用剩余的空间 |
flex-start | 行左堆叠 |
flex-end | 行右堆叠 |
center | 各行向弹性盒容器的中间位置堆叠 |
space-between | 各行在弹性盒容器中平均分布 |
space-around | 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半 |
<style>
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: wrap;
align-content: center;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
</style>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
flex-flow 是flex-direction 和 flex-wrap 的简写
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
</style>
<div class="flex-container">
<div class="flex-item">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
弹性盒子元素属性
order 排序
用整数值来定义排列顺序,数值小的排在前面。可以为负值
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
.first {
order: -1;
}
</style>
<div class="flex-container">
<div class="flex-item first">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item">item-3</div>
</div>
margin对齐
设置"margin"值为"auto"值,自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto",可以使弹性子元素在弹性容器的两上轴方向都完全居中。
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
.first {
order: -1;
}
.three {
margin-right: auto;
}
<!--完美的居中-->
.flex-item-1 {
margin: auto;
}
</style>
<div class="flex-container">
<div class="flex-item first">item-1</div>
<div class="flex-item">item-2</div>
<div class="flex-item three">item-3</div>
</div>
<!--完美的居中-->
<div class="flex-container">
<div class="flex-item-1">完美的居中</div>
</div>
align-self 设置元素自身在X、Y轴上到对齐方式
属性对照:
属性名 | 描述 |
---|---|
auto | 如果align-self 的值为auto ,则其计算值为元素的父元素的align-items 值,如果其没有父元素,则计算值为'stretch'。 |
flex-start | 子元素的X轴(Y轴)起始位置对齐 |
flex-end | 子元素的X轴(Y轴)结束位置对齐 |
center | 子元素的X轴(Y轴)居中对齐 |
baseline | 子元素的X轴(Y轴)基线对齐 |
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap;
width: 300px;
height: 200px;
}
.flex-item {
width: 100px;
height: 100px;
background: #f66;
}
.item-1 {
align-self: flex-start;
}
.item-2 {
align-self: center;
}
.item-3 {
align-self: flex-end;
}
</style>
<div class="flex-container">
<div class="flex-item item-1">item-1</div>
<div class="flex-item item-2">item-2</div>
<div class="flex-item item-3">item-3</div>
</div>
flex 指定弹性子元素如何分配空间
属性对照:
属性名 | 描述 |
---|---|
none | none关键字的计算值为: 0 0 auto |
[ flex-grow ] | 定义弹性盒子元素的扩展比率 |
[ flex-shrink ] | 定义弹性盒子元素的收缩比率 |
[ flex-basis ] | 定义弹性盒子元素的默认基准值 |
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
}
</style>
<div class="flex-container">
<div class="flex-item item1">flex item 1</div>
<div class="flex-item item2">flex item 2</div>
<div class="flex-item item3">flex item 3</div>
</div>
弹性盒子响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox 响应式布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.flex-container > * {
padding: 10px;
flex: 1 100%;
}
.flex-header {
background: coral;
}
.flex-main {
background: cornflowerblue;
}
.flex-footer {
background: lightgreen;
}
.aside1 {
background: moccasin;
}
.aside2 {
background: violet;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.flex-main {
flex: 4 0px;
}
.aside1 { order: 1;}
.flex-main { order: 2;}
.aside2 { order: 3;}
.flex-footer { order: 4; }
}
</style>
</head>
<body>
<div class="flex-container">
<header class="flex-header">头部</header>
<article class="flex-main">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut atque id obcaecati quasi alias eveniet facere necessitatibus sit distinctio ipsa nihil officia architecto odit debitis natus maxime, perspiciatis maiores labore.</p>
</article>
<aside class="aside aside1">边栏1</aside>
<aside class="aside aside2">边栏2</aside>
<footer class="flex-footer">底部</footer>
</div>
</body>
</html>
flexbox属性速览及常见布局实现的更多相关文章
- CSS(二)- 属性速览(含版本、继承性和简介)
相关链接 CSS3速查表,这里面列出了所有新增的属性以及新增或者修改的属性值 css参考手册,很好地一个常用网站 CSS定位(不可继承) CSS布局(仅visibility可继承) CSS尺寸(不可继 ...
- Flexbox属性可视化指南
Flexbox 布局(国内很多人称为弹性布局)正式的全称为 CSS Flexible Box布局模块,它是CSS3新增的一种布局模式.它可以很方便地用来改善动态或未知大小的元素的对齐,方向和顺序等等. ...
- 几种常见布局的flex写法
flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算 ...
- Flex布局 Flexbox属性具体解释
原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...
- 100 个常见错误「GitHub 热点速览 v.22.35」
本周的特推非常得延续上周的特点--会玩,向别人家的女朋友发送早安.这个错误是如何发生的呢?如何有效避免呢?自己用 daily_morning 免部署.定制一个早安小助手给女友吧. 除了生活中的错误,工 ...
- HTML5 速览
HTML5 速览 一. HTML5 元素分类 HTML赋值文档内容的结构和含义, 内容呈现由css样式控制 元素选用原则 少亦可为多 标记只应该应内容对语义的需要使用. 有条经验法则是: 问问自己打算 ...
- .NET平台开源项目速览(1)SharpConfig配置文件读写组件
在.NET平台日常开发中,读取配置文件是一个很常见的需求.以前都是使用System.Configuration.ConfigurationSettings来操作,这个说实话,搞起来比较费劲.不知道大家 ...
- .NET平台开源项目速览(8)Expression Evaluator表达式计算组件使用
在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Expression Evaluator验证组件.那里只是概述了一下,并没有对其使用和强大功能做 ...
- .NET平台开源项目速览(20)Newlife.Core中简单灵活的配置文件
记得5年前开始拼命翻读X组件的源码,特别是XCode,但对Newlife.Core 的东西了解很少,最多只是会用用,而且用到的只是九牛一毛.里面好用的东西太多了. 最近一年时间,零零散散又学了很多,也 ...
随机推荐
- thinkphp 查询缓存
对于及时性要求不高的数据查询,我们可以使用查询缓存功能来提高性能,而且无需自己使用缓存方法进行缓存和获取. 大理石平台价格 查询缓存功能支持所有的数据库,并且支持所有的缓存方式和有效期. 在使用查询缓 ...
- php-fpm 服务
编译安装PHP的时候已经加入了--enable-fpm 在此基础上启动php-fpm服务 cp /usr/local/php/etc/php-fpm.conf.default /usr/local/p ...
- vue-cli整合axios的几种方法
Vue这个框架现在在单页面应用方面非常受人欢迎. 基于vue-cli创建的项目怎么样才能更好地处理网络请求? 首选的应该就是axios了 这次给刚接触vue的新手介绍一下axios在vue中如何使用 ...
- C++的指针常量和常量指针
这2个概念非常容易混淆,即使是老鸟,也有眩晕的时候,写此博文,加深记忆... 指针常量:一个指针,并且它是一个常量,它的值不许被改变: char *const p1 = "Hello!&qu ...
- 修改linux默认语言
linux修改默认语言 编辑/etc/sysconfig/i18n这个文件(不存在就新建一个),原内容如下: LANG="en_US.UTF-8" SYSFONT=" ...
- Day 13 : 函数递归,
从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀,讲的是,从前有有座山,山里有座庙,庙里有个老和尚给小和尚们讲故事,讲的什么呀?讲的是?...... 递归:1.一个函数再内部调用了 ...
- Centos 7 ping 不通外网
首先检查添加DNS是否正常,如不存在则添加dns: [root@cgls]# vim /etc/resolv.conf nameserver 114.114.114.114 nameserver 8. ...
- 006-Java的break和continue
break 和 continue关键字的使用 break: 结束当前循环 continue:结束当次循环 示例如下 class JavaTest{ public static void main(St ...
- JS去重算法
1.遍历数组法 它是最简单的数组去重方法(indexOf方法) 实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该新数组中: var arr=[2,8,5, ...
- tomcat的webapps下面包含五个自带的项目
1.docs tomcat的介绍和操作文档等 2.examples 小程序示例 3.host-manager host管理 4.manager(重点) 进行 Server Status 和 Appli ...