CSS伸缩布局
1. 伸缩布局应用:
伸缩布局应用
主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向
侧轴： 与主轴垂直的轴称为侧轴，默认还是垂直方向
方向： 默认是主轴从左向右， 侧轴默认是从上到下 主轴和侧轴并不是固定不变的 通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了
max-width 跟上面这个相反
flex 可以放在每个盒子里面自由调整 需要给盒子添加display: flex;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父级盒子添加flex*/
display: flex; /*伸缩布局模式*/
}
section div { height: 100%;
flex: 1; /*每个子盒子占的份数*/ }
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
}
section div:nth-child(3) {
background-color: pink;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
2. 伸缩盒子设置固定宽度
section div:nth-child(1) {
background-color: pink;
width: 300px;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 1;
}
section div:nth-child(3) {
background-color: pink;
flex: 2;
}
伸缩的时候2和3可以伸缩 1不会变
3.伸缩布局的排列方式
flex-direction: colomn; 列布局
flex-direction: colomn；行布局
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*给父级盒子添加flex*/
display: flex; /*伸缩布局模式*/
min-width: 500px;
flex-direction: column;
}
协程布局案列：
案例之协程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
}
header img {
width: 100%;
height: 100%;
}
nav {
padding: 5px;
}
.row {
height: 90px;
width: 100%;
background-color: #ff697a;
border-radius: 8px;
display: flex;
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1;
border-left: 1px solid #fff;
}
row div:first-child { }
.hotel {
display: flex;
flex-direction: column;
}
.hotel a {
flex: 1;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0, .3) }
.hotel a:first-child {
border-bottom: 1px solid #fff;
} </style>
</head>
<body>
<header>
<img src="data:image/ctrip.jpg" alt="">
</header>
<nav>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div> <div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div> <div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div> <div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">客栈</a>
</div>
</div>
</nav>
</body>
</html>
4.调整主轴对齐
justify-content 调整主轴对齐 值 描述
flex-start 让子元素从父元素的开头排序
flex-end 位于容器的结尾
center 位于容器的中心
space-between 左右贴近父盒子 中间分布空白距离
space-around 相当于给每个盒子添加了每个盒子的margin
5. 调整垂直对齐
align-items 调整垂直对齐
值 描述
stretch 让子元素的高度拉伸适应父容器（前提是子元素不给高度）
center 垂直居中
flex-start 垂直对齐开始位置
flex-end 垂直对齐结束位置
6. 控制是否换行
nowrap: 不换行 相当于强制一行显示 默认是这个
wrap 自动换行
wrap-reverse
7. 多行调整垂直对齐
align-content堆栈 针对flex里面多轴的情况下，align-items是针对一行的
必须对父亲设置display: flex;
flex-direction： row; 方式为横向排列 以及flex-wrap: wrap; strech
center
flex-start
flex-end
space-between
space-around 属性作用跟align-items的一样 order控制子盒子的前后顺序
数值越小越往前 可以写负数 默认是0
CSS伸缩布局的更多相关文章
- CSS 伸缩布局
转载于:https://blog.csdn.net/weixin_41342585/article/details/80140513 1. flex-direction:设置伸缩容器中成员的排列方式 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- css学习_css3伸缩布局 flex布局
1.flex布局 案例一: 案例二: 保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例 -----用fle ...
- CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...
- CSS3伸缩布局Flex学习笔记
如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...
- 第 29 章 CSS3 弹性伸缩布局[上]
学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一．布局简介 CSS3 提供一种崭新的 ...
- CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
- flexbox 伸缩布局盒
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计. Flexbox 由 伸缩容器 和 伸缩项目 组成.通过设置元素的 display 属性为 ...
- CSS3弹性伸缩布局（上）——box布局
布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...
随机推荐
- Chrome 浏览器自动填表呈现淡黄色解决
Chrome 浏览器,当记住用户名和密码后,下次填写表单时,被记住的部分会被填充为淡黄色,有些时候不好看. 解决方式如下: input:-webkit-autofill { -webki ...
- ES6深入浅出-2 新版函数：箭头函数 2 视频-1.视频 箭头函数
ES3里面的写法 匿名函数是用不了的 还是需要给他赋值 选中的这一部分叫做匿名函数 等于号叫做赋值 let xxx叫做声明 所以说这个地方是三个语法,首先声明一个匿名函数,然后声明一个xxx变量,最后 ...
- python基础之知识补充-作用域、特殊语法
python作用域 无函数的作用域 在python中没有块级作用域 什么叫块级作用域呢?先来看个例子: if 1 == 1: name= 'alex' print(name) 运行结果为alex 在j ...
- 使用mysqldump备份表数据
使用mysqldump备份远程表数据到本地 下面的命令是使用mysqldump命令备份远程数据库的一张表的信息,并将信息保存到本地的一个文件的一个示例: mysqldump -h 192.168.1. ...
- ubuntu18.04安装chromium浏览器
sudo add-apt-repository ppa:a-v-shkop/chromium sudo apt-get upate sudo apt-get install chromium-brow ...
- js 高级程序设计 第四章学习笔记
问题:怎么才能形象的理解堆栈空间? 1. 声明变量 使用 var 声明的变量会自动被添加到最接近的环境中.在函数内部,最接近的环境就是函数的局部 环境:在 with 语句中,最接近的环境是函数环境.如 ...
- jsplumb实现流程图
流程图使用工具汇总 jsPlumb,开源软件,推荐使用,参考学习链接: jsplumb学习笔记.基本概念.中文简易教程 jTopo myflow Go.js JointJS,属于商业软件 mxGrap ...
- 修改iPhone5s crash 问题
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...
- 使用javamelody监控springboot项目
JavaMelody是用来在QA和实际运行生产环境中监控Java或Java EE应用程序服务器的一个开源框架.它不是一个工具来模拟来自用户的请求,而是一个测量和计算用户在实际操作中应用程序的使用情况的 ...