先让我们看看在原来的学习中遇到的问题
之前在软件工程的大作业中，自己从零开始学习如何开发一个网站，从页面，到后台，当然数据库是大二的必修课
在学习如何编写一个静态页面的时候，完全是自学，自己摸索，所以遇到了很多问题，自己花费了太多时间去解决问题，今天就拿其中一个比较让我头疼的问题来引出今天的话题
当时在初识html、css的时候，遇到了水平排放的问题，当然这个一下子就查出来了，使用 float ，但是使用了 float 会使子元素脱离父元素的布局，父元素的高度会变成 0 ，从而根本展示不出来
这个问题我当时是意识不到的，只能发现“卧槽，父元素咋就不见了呢 ？”
然后知道了要用 clear 清除浮动具体解决过程如下：
1.一开始只能垂直排放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局学习</title>
<style media="screen">
.father{
width: 500px;
height: 500px;
border: 2px solid black;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>
2.1在css部分添加 float，并再添加一个粉色的且不需要浮动的d3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局学习</title>
<style media="screen">
.father{
width: 500px;
height: 500px;
border: 2px solid black;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.d3{
width: 300px;
height: 300px;
background-color: pink;
/*float: left;*/
}
</style>
</head>
<body>
<div class="father">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
会出现如下的bug：
2.2如果我们删除d3，且把 father的高度设为默认会出现如下的 bug：
具体原因上面已经说过了这里不再赘述，反正很麻烦，很不好看就是了
我们要怎么解决呢 ？
3.给父元素加清浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局学习</title>
<style media="screen">
.clear::after{
display: block;
content: '';
clear: both;
}
.father{
width: 500px;
/*height: 500px;*/
border: 2px solid black;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
/*.d3{
width: 300px;
height: 300px;
background-color: pink;
}*/
</style>
</head>
<body>
<div class="father clear">
<div class="d1"></div>
<div class="d2"></div>
<!-- <div class="d3"></div> -->
</div>
</body>
</html>
上次在一个公众号里看到了一篇文章介绍了 flex布局（弹性布局），今天打算学习一下
1.对应上面的问题我们从新写一个 display为 flex的 div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局学习</title>
<style media="screen">
.clear::after{
display: block;
content: '';
clear: both;
}
.father{
width: 500px;
/*height: 500px;*/
border: 2px solid black;
}
.d1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.d2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
<style media="screen">
.flex-father{
display: flex;
width: 500px;
/*height: 500px;*/
border: 2px solid black;
}
.f1{
width: 200px;
height: 200px;
background-color: red;
}
.f2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="father clear">
<div class="d1"></div>
<div class="d2"></div>
</div>
<div class="flex-father">
<div class="f1"></div>
<div class="f2"></div>
</div>
</body>
</html>
我们可以发现效果是一模一样的
2.当子元素总宽度小于父元素时，是正常展示的，那我们再加几个子元素试试
我们可以发现 flex布局中的子元素被自动压缩来适应父元素的大小
如果我们不想子元素被压缩，可以给子元素添加 flex-shrink：0;
.f1, .f2{
flex-shrink:;
}
flex-shrink为1则默认收缩
flex-shirink为0则不收缩
一、flex与主轴方向
<!DOCTYPE html>
<html>
<head>
<title>flex布局的主轴</title>
<style>
.father-flex{
width: 800px;
height: 200px;
background-color: #cccccc;
display: flex;
/*主轴方向默认为 水平从左向右*/
/* flex-direction: row; */ /* 主轴方向，水平从右往左 */
/* flex-direction: row-reverse; */ /* 主轴方向从上往下 */
/* flex-direction: column; */ /*主轴方向从下往上 */
/* flex-direction: column-reverse; */
}
.item{
width: 200px;
height: 200px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 40px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="father-flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
二、flex与换行
<!DOCTYPE html>
<html>
<head>
<title>flex换行</title>
<style>
.father-flex{ width: 800px;
/* height: 200px; */
background-color: #cccccc; display: flex;
/*主轴方向默认为 水平从左向右*/
flex-direction: row; /* flex默认的里面的子元素是不换行，当超出时会压缩 */
/* 换行 第一行在上方 */
/* flex-wrap: wrap; */ /* 换行 第一行在下方 */
flex-wrap: wrap-reverse;
}
.item{
width: 200px;
height: 200px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 40px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="father-flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
三、flex子元素在主轴上的对齐方式
<!DOCTYPE html>
<html>
<head>
<title>flex项目在主轴上的对齐方式</title>
<style>
.father-flex{ width: 800px;
/* height: 200px; */
background-color: #cccccc; display: flex;
/*主轴方向默认为 水平从左向右*/
flex-direction: row; /* 项目在主轴上默认为 靠近起点 */
/* justify-content: flex-start; */ /* 项目在主轴上居中 */
/* justify-content: center; */ /* 项目在主轴上 靠近终点*/
/* justify-content: flex-end; */ /* 项目在主轴上 两端对齐（项目之间的间隔都相等） */
justify-content: space-between; /* 每个项目两侧的间隔都相等 */
/*justify-content: space-around;*/ }
.item{
width: 200px;
height: 200px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 40px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body> <div class="father-flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- <div class="item">4</div> -->
</div> </body>
</html>
四、flex子元素在交叉轴上的对齐方式
<!DOCTYPE html>
<html>
<head>
<title>flex项目在交叉轴上的对齐方式</title>
<style>
.father-flex{
width: 800px;
height: 200px;
background-color: #cccccc;
display: flex;
flex-direction: row;
/* 项目（子元素）在交叉轴上默认是交叉轴的起点 */
/* align-items: flex-start; */ /* 项目在交叉轴上 居中对齐 */
/*align-items: center; */ /* 项目在交叉轴的终点 */
/* align-items: flex-end; */ /* 项目在交叉轴上 占满容器的高度 项目高度为auto*/
/* align-items: stretch; */ /* 项目在交叉轴上 基于第一行文字的基线对齐 */
align-items: baseline;
}
.item{
width: 100px;
height: 100px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 24px;
text-align: center;
/* line-height: 100px; */
word-break: break-all;
}
.item2{
font-size: 16px;
}
</style>
</head>
<body>
<div class="father-flex">
<div class="item">111111111111111111111111111111111111111111111111111111111111</div>
<div class="item item2">2222222222222222222222222222222222222222222222222</div> </div>
</body>
</html>
五、项目的排序
<!DOCTYPE html>
<html>
<head>
<title>flex项目的排序</title>
<style>
.father-flex{
width: 800px;
height: 200px;
background-color: #cccccc; display: flex;
/*主轴方向默认为 水平从左向右*/
flex-direction: row;
}
.item{
width: 200px;
height: 200px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 40px;
text-align: center;
line-height: 200px;
}
.ff{
/* 数值越小，排序越靠前，默认为0 */
order: 1;
}
</style>
</head>
<body>
<div class="father-flex">
<div class="item">1</div>
<div class="item ff">2</div>
<div class="item">3</div>
</div>
</body>
</html>
六、子元素在交叉轴独自的对齐方式
<!DOCTYPE html>
<html>
<head>
<title>flex项目单独在交叉轴上的对齐方式</title>
<style>
.father-flex{
width: 800px;
height: 200px;
background-color: #cccccc;
display: flex;
flex-direction: row;
/* 项目（子元素）在交叉轴上默认是交叉轴的起点 */
/* align-items: flex-start; */ /* 项目在交叉轴上 居中对齐 */
align-items: center; /* 项目在交叉轴的终点 */
/* align-items: flex-end; */ /* 项目在交叉轴上 占满容器的高度 项目高度为auto*/
/* align-items: stretch; */
}
.item{
width: 100px;
height: 100px;
border: 1px dashed #333333;
box-sizing: border-box;
font-size: 24px;
text-align: center;
line-height: 100px; }
.item3{
/* 项目与其他项目不一样的对齐方式 */
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: stretch; */
align-self: baseline;
} </style>
</head>
<body>
<div class="father-flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
七、flex与栅格化布局
<!DOCTYPE html>
<html>
<head>
<title>flex与栅格化布局</title>
<style>
.imgCnt {
display: flex;
width: 640px;
flex-direction: row;
background-color: #dddddd;
flex-wrap: wrap;
}
.imgItem {
width: 20%;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
box-sizing: border-box;
}
img{
/* 这个还蛮重要的，因为图片的默认布局是行内布局 */
display: block;
width: 100%;
}
</style>
</head> <body>
<div class="imgCnt">
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
<div class="imgItem">
<img src="logo.png" />
</div>
</div>
</body>
</html>
八、flex布局图文列表
<!DOCTYPE html>
<html>
<head>
<title>flex布局图文列表</title>
<style>
.goodList{
width: 640px;
background-color: #dddddd;
display: flex;
flex-direction: column;
}
.listItem{
display: flex;
flex-direction: row;
align-items: stretch;
}
.imgBox{
flex: 3;
}
.imgBox img{
display: block;
width: 100%;
}
.goodInfoBox{
flex: 7;
padding: 10px 0;
padding-left:10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.goodInfoBox p,
.goodInfoBox h3{
margin: 0;
}
</style>
</head>
<body>
<div class="goodList">
<div class="listItem">
<div class="imgBox">
<img src="good.png"/>
</div>
<div class="goodInfoBox">
<h3>联想lenovo小新V4000 15.6英寸笔记本电脑</h3>
<p>月售542笔</p>
<p>售价：￥1999</p>
</div>
</div>
</div>
</body>
</html>
今天的学习就告一段落
参考资料：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex布局【弹性布局】学习的更多相关文章
-
Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
-
CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
-
Flutter布局----弹性布局 (Flex)
弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...
-
HTML-移动开发技巧 响应式布局 弹性布局
移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...
-
flex布局-弹性布局
弹性布局当前应用的非常广泛,特别是移动端,记得第一次用reactNative 写代码的时候是最开始真正接触Flex布局.1.首先最外层的容器需要指定为display:flex;由于flex的兼容版本还 ...
-
css布局 弹性布局 和 网格布局
这里就不写这两种布局的内容了 弹性布局链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网格布局链接:https://www.ji ...
-
flex (html弹性布局)
flex是什么? 任何容器都可以指定为flex布局: .box{ display: flex; /* 行内元素可以使用:inline-flex,webket内核浏览器必须 -webkit-flex ...
-
Flex弹性布局在移动设备上的应用
引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不 ...
-
flex布局（弹性布局）
1. 传统布局与 flex 布局比较 传统布局 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC端浏览器支持较差 IE 11 或 ...
-
两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
随机推荐
-
@font-face使用
转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ...
-
[原创]python之简单计算器(超详解,只有基本功能+－*/，还有括号处理)
不想看过程的话,直接看文章最后的正式源码 作业需求及分析: 流程图 https://www.processon.com/diagraming/580c5276e4b03c844a5a9716 初期感 ...
-
J2EE与JavaWeb的区别
1.Java分类 Java分为JavaSE(Java标准版).J2EE(Java企业版)和JavaME(Java微型版): JavaSE(Java Standard Edition),一般用来开发桌面 ...
-
Android项目结构 以及体系结构
学习Android平台的人一般对Android的平台的应该有点认识 其它的就不多讲了 Android项目一般由以下几个部分构成 以上是一个简单的Android项目结构目录图 1. src 主要是 源 ...
-
(十)stm32中FSMC的使用（用于LCD）
FSMC全称“静态存储器控制器”. 使用FSMC控制器后,可以把FSMC提供的FSMC_A[25:0]作为地址线,而把FSMC提供的FSMC_D[15:0]作为数据总线. (1)当存储数据设为8位时, ...
-
【Tyvj1038】忠诚 线段树
题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财主还是对管家产生了 ...
-
[2012山东省第三届ACM大学生程序设计竞赛]——n a^o7 !
n a^o7 ! 题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2413 Time Lim ...
-
Unity5UGUI 官方教程学习笔记（三）UI BUTTON
Button Interactable :为了避免与该按钮产生交互,可以设置它为false Transition: 管理按钮在正常情况 ,按下,经过时的显示状态 None 按钮整正常工作 但是在按 ...
-
[maven] 初试maven
环境 CentOS 6 一, 安装: [root@okk ~]# wget http://mirrors.hust.edu.cn/apache/maven/maven-3/3.5.0/binaries ...
-
【托业】【新托业TOEIC新题型真题】学习笔记9-题库七+八--P4-5
109.intend 意为“打算,意欲”,含有将来的含义,故不用将来时态 110.must do sth 必须做某事 111.recession 经济衰退,不景气 rebound 反弹:反应 recr ...