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弹性盒模型的基本语法和兼容写法, ...
随机推荐
- IO流的标准处理代码
FileInputStream fis = null; FileOutputStream fos = null; try { fis = new FileInputStream("aaa.t ...
- web自动化01-自动化解决的问题-环境搭建-元素定位
自动化测试 概念:由程序代码代替人工完成验证系统功能的过程 解决的问题: 回归测试 压力测试 兼容性测试 提高测试效率,提升产品质量 自动化测试分类 web自动化测试 移动自动化测试 接口自动化测试 ...
- Python基础之set集合与函数
set集合 集合是一个无序且不重复的元素组合,以大括号表示.使用详情: >>> b=set(a) >>> type(b) <class 'set'> & ...
- Intellij-编译
目录 IntelliJ IDEA 编译方式介绍 编译方式介绍 编译触发按钮 运行之前的编译 @(目录) IntelliJ IDEA 编译方式介绍 编译方式介绍 相比较于 Eclipse 的实时自动编译 ...
- 怎么用Ubuntu系统制作Ubuntu系统盘
ubuntu 16 下载地址: http://releases.ubuntu.com/16.04/?_ga=2.211639766.273896083.1564759714-49163328.1564 ...
- NodeJs本地搭建服务器，模拟接口请求，获取json数据
最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...
- mysql:服务无法启动解决
输入mysqld --console,查看报错 Found option without preceding group in config file E:\mysql-5.7.21-winx64\m ...
- 【c# 学习笔记】子类的初始化顺序
使用了继承之后,当我们初始化一个子类时,除了会调用子类的构造函数外,同时也会调用基类的构造函数.子类的初始化顺序如下: ① 初始化类的实例字段: ② 调用基类的构造函数,如果没有指明基类,则调用Sys ...
- charles 文件菜单总结
本文参考:charles 文件菜单总结 一.file(文件菜单) 需要注意的是 "导入"和"导出"这个功能在和别人沟通的时候用, 比如你向第三方工具/类库开发人 ...
- 慕课零基础学java语言翁恺老师——第二周编程题
1.时间换算(5分) 题目内容: UTC是世界协调时,BJT是北京时间,UTC时间相当于BJT减去8.现在,你的程序要读入一个整数,表示BJT的时和分.整数的个位和十位表示分,百位和千位表示小时.如果 ...