css之弹性盒模型
弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。
一、display:flex
作用：让当前元素形成盒，控制子元素。
特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section{
display: flex;
}
span{
width: 100px;
height: 100px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<section>
<span></span> </section> </body>
</html>
二、具有以下属性：
1、flex-direction 改变主轴的排列方向
属性值：
row X为主轴
column Y为主轴
row-reverse 在主轴反向排列
2、justify-content 主轴对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐，中间自动分配
space-around 自动分配距离
3、align-items 侧轴对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
baseline和flex-start等效
4、flex-wrap 换行
属性值：
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
5、allign-content 行与行之间对齐方式
属性值：
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐，中间自动分配
space-around 自动分配距离
6、align-self 控制一个子元素（灵活元素）在侧轴的对齐方式
属性值：
auto 默认值。元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”
stretch 元素被拉伸以适应容器
content 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
7、order 排序（控制子元素的先后顺序，数值越大越向后排。可以为负）
8、flex:1 把剩余空间全部分配给当前元素（当然指的是分配主轴上的空间）
flex是一个复合属性,设置或者是检索弹性盒模型对象的子元素如何分配空间
新版盒模型
flex三个属性介绍：flex-grow:一个数字，规定项目相对于其它灵活的项目进行扩展的量
flex-shrink:一个数字，规定项目将相对于其它灵活项目进行收缩的量
flex-basis:项目长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
#section1{
width: 600px;
height: 500px;
background-color: aliceblue;
margin: auto;
display: flex;
flex-direction: column;
/* flex-direction: row-reverse; */
flex-direction: row; /*属性1*/
justify-content: center;
justify-content: space-around; /*属性2*/
align-items: baseline;
align-items: flex-start;
align-items: center; /*属性3*/
flex-wrap: wrap; /*属性4*/
align-content: flex-end;
align-content: center; /*属性5*/ }
span{
width: 100px;
height:100px;
background: orange;
border-radius: 50%;
font-size: 20px;
color:white;
text-align: center;
} #section2{
width: 600px;
height: 400px;
background-color: aliceblue;
margin: 0 auto;
display: flex;
align-items: center;
}
div{
width: 100px;
height: 100px;
background-color: antiquewhite;
font-size: 20px;
color:white;
text-align: center;
}
div:nth-child(1){
background-color: red;
order: 3; /* 属性7 */
flex:1; /* 属性8 */
}
div:nth-child(2){
background-color: blue;
/* align-self: flex-end; 属性6 */
flex:1;
border:10px solid green; }
div:nth-child(3){
flex:1;
} </style>
</head>
<body>
<section id="section1">
<span>1</span>
<span>2</span>
<span>3</span>
<span >4</span>
<span>5</span>
<span>6</span>
<span>7</span> </section>
<br>
<section id="section2">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</section>
</body>
</html>
案例1：骰子
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} html,
body {
height: 100%;
} body {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
} div {
width: 100px;
height: 100px;
background-color: #e7e7e7;
padding: 4;
border-radius: 10px;
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
} span {
display: block;
width: 24px;
height: 24px;
background-color: black;
border-radius: 12px;
margin: 4px;
box-shadow: inset 0 3px #111, inset 0 -3px #555;
} div:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
} div:nth-child(2) {
display: flex;
justify-content: space-between;
} div:nth-child(2) span:nth-child(2) {
align-self: flex-end;
} div:nth-child(3) {
display: flex;
flex-direction: column;
} div:nth-child(3) span:nth-child(2) {
align-self: center;
} div:nth-child(3) span:nth-child(3) {
align-self: flex-end;
} div:nth-child(4) {
display: flex;
justify-content: space-between;
} div:nth-child(4) p {
display: flex;
flex-direction: column;
justify-content: space-between;
} div:nth-child(5) {
display: flex;
justify-content: space-between;
} div:nth-child(5) p {
display: flex;
flex-direction: column;
justify-content: space-between;
} div:nth-child(5) p:nth-child(2) {
align-self: center;
}
div:nth-child(6) {
display: flex;
justify-content: space-between;
} div:nth-child(6) p {
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style> </head> <body>
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span><span></span>
</p>
</div>
<div>
<p>
<span></span><span></span><span></span>
</p>
<p>
<span></span><span></span><span></span>
</p>
</div>
</body>
</html>
css之弹性盒模型的更多相关文章
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 【css】弹性盒模型
弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- css和css3弹性盒模型实现元素宽度（高度）自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 关于ie中实现弹性盒模型-我的css
css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...
- CSS——弹性盒模型
弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 这东 ...
- CSS弹性盒模型flex概念
盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模型. 先说CSS的伸缩盒模型:flex模型是CSS3引入的新的布局模型,是flexible box的缩写,一般称之为弹性盒模型.和CSS ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
随机推荐
- List三个子类的特点
List的三个子类的特点 ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vector: 底层数据结构是数组,查询快,增删慢. 线程安全,效率低. Vector相对A ...
- 怎样修复社区项目Karbor的Bug?
1.准备工作. 点击Settings按钮进行设置,跳转到 https://review.openstack.org/#/settings/ 2.选择用户名称. 这个选择之后不能修改. 3.设置http ...
- 123457123456#0#-----com.twoapp.jingPinYinYu01----儿童学英语jiemei
com.twoapp.jingPinYinYu01----儿童学英语jiemei
- 关于做移动端ui自动化测试使用PC代理网络会出现的问题
无论是手动操作app还是ui脚本操作app,只要你使用了代理网络,第一次请求的时长会耗时特别长,所以在移动端测试时尽量不要使用代理网络,减少不必要的麻烦
- Select 优化
https://yq.aliyun.com/articles/704238?spm=a2c4e.11155472.0.0.66be4efeaUB5bk
- js 高级程序设计 第四章学习笔记
问题:怎么才能形象的理解堆栈空间? 1. 声明变量 使用 var 声明的变量会自动被添加到最接近的环境中.在函数内部,最接近的环境就是函数的局部 环境:在 with 语句中,最接近的环境是函数环境.如 ...
- Unity接入九游SDK学习与踩坑
学习之路漫漫,应修之期远兮.持之以恒,方得始终. 这几日接入九游SDK,于浑浑噩噩中成长. 下面是步骤: 一:下载九游SDK 二:打开Android Studio新建一个工程,并且新建一个Androi ...
- 【POJ - 3268 】Silver Cow Party （最短路 Dijkstra算法）
Silver Cow Party Descriptions 给出n个点和m条边,接着是m条边,代表从牛a到牛b需要花费c时间,现在所有牛要到牛x那里去参加聚会,并且所有牛参加聚会后还要回来,给你牛x, ...
- redis相关操作命令
一.相关命令列表: 命令原型 时间复杂度 命令描述 返回值 KEYS pattern O(N) 时间复杂度中的N表示数据库中Key的数量.获取所有匹配pattern参数的Keys.需要说明的是,在我们 ...
- RabbitMQ的安装（Windows环境下）
在使用RabbitMQ之前,先知道什么是AMQP,AMQP 即 Advanced Message Queuing Protocol ,又叫高级消息队列协议,是应用层协议的一个开放标准,其主要特征是面向 ...