html页面布局之flex弹性盒子

一、背景介绍

Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。

flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。

最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。

二、知识剖析

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross
start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、常见问题

元素的水平垂直居中

四、解决方案

1.传统方案

2.flex解决方案

五、编码实战

<!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>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="box">

<span class="box2">&nbsp</span>
<span class="box2">&nbsp</span>
<span class="box2">&nbsp</span>
</div>
</body>

</html>

html{
font-size: 62.5%;
}
body{
margin: 0;
}
.box{
width: 100%;
height: 30rem;
background: rgb(190, 189, 189);
/* text-align: center;
line-height: 30rem; */
display:flex;
/* justify-content: center; */
align-items: center;
/* justify-content: flex-start; */
justify-content: flex-end;
/* justify-content: space-between; */
/* justify-content: space-around; */
/* align-items:flex-start; */
/* align-items: flex-end; */
}
.box1{
position: absolute;
background: orange;
padding: 5rem 5rem;
/* text-align: center; */
/* margin: auto 0 ; */
}
.box2{
position: absolute;·
margin: 0rem;
background: orange;
padding: 5rem 5rem;
}

六、拓展思考

flex布局在各浏览器下的兼容性

七、参考文献

参考一：
<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool">阮一峰</a>

参考二:
<a href="http://www.cnblogs.com/mk2016/p/5562994.html">兼容性</a>

八、更多讨论

https://www.jianshu.com/p/2dfa5bab1ef1

提问1：flex:1;是什么意思，有什么效果

回答：flex：1代表一个页面的宽度比例，在不不确定元素的宽度值的时候会用到。

提问2：flex有什么缺点

回答：浏览器支持不全是最大缺点

提问3：flex里面的元素可以使用绝对定位吗

回答：可以使用绝对定位

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能，请移步官网点击链接直达：http://www.jnshu.com/login/1/17884272

html页面布局之flex弹性盒子相关推荐

flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
Vue.js-Day08【项目实战(附带完整项目源码)-day03：订单确认页面、美团支付页面、flex弹性盒子布局】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...

html页面布局之flex弹性盒子

html页面布局之flex弹性盒子相关推荐

最新文章

热门文章