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弹性盒模型的基本语法和兼容写法, ...
随机推荐
- Android绘图通用第三方控件
https://github.com/ddanny/achartengine CodePull requests 2SecurityInsights Charting library fo ...
- 起步 - 安装 Git
安装 Git 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码 ...
- Linux输出信息并将信息记录到文件（tee命令）
摘自:https://www.jb51.net/article/104846.htm 前言 最近工作中遇到一个需求,需要将程序的输出写到终端,同时写入文件,通过查找相关的资料,发现可以用 tee 命令 ...
- Qt编写自定义控件40-导航进度条
一.前言 导航进度条控件,其实就是支付宝.京东.淘宝订单页面的进度控件,提示当前第几步,总共有几步,然后当前进度特殊颜色显示,每个进度带有时间文字等信息,本控件特意将三种样式风格都集成进去了,京东订单 ...
- 关于mysql索引---联合索引
结论: mysql联合索引,联合索引以哪个字段开始很重要. 如果 联合索引字段为 1,2,3,4 那么如果查询条件为 6,7,8,1 这样也会走上面的联合索引 但是如果查询条件不是从1开始那么则 ...
- 【418】C语言ADT实现Quack(stack+queue)
quack.h #include <stdio.h> #include <stdlib.h> #include <assert.h> typedef struct ...
- JavaScript正则表达式补充
定义正则表达式 /.../用于定义正则表达式 /.../g表示全局匹配 /.../i表示不区分大小写 /.../m表示多行匹配 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m ...
- Java-WebSocket调用报错：WebSocketClient objects are not reuseable
我的代码 import com.google.common.collect.ImmutableMap; import com.google.common.io.ByteArrayDataOutput; ...
- Python命令行参数解析模块getopt使用实例
Python命令行参数解析模块getopt使用实例 这篇文章主要介绍了Python命令行参数解析模块getopt使用实例,本文讲解了使用语法格式.短选项参数实例.长选项参数实例等内容,需要的朋友可以参 ...
- 折线图值和坐标轴y轴不对应问题记录
这个问题的产生是由于,在代码中加入了累加算法导致, series: lineObject.sort.map(item => { return ( { name: item, type: 'lin ...