文章目录

flex布局
- flex布局-介绍
- flex布局-效果
- flex布局-两根轴线
- flex布局-容器属性
- - flex-direction
  - flex-wrap
  - flex-flow
  - justify-content
  - align-items
- flex布局-项目属性
- - flex-grow
  - flex-shrink
  - flex-basis
  - order
布局实战
- 布局实战-flex实现水平·垂直居中
- 布局实战-实现卡片列表
- 布局实战-实现导航目录

flex布局

flex布局-介绍

传统的布局有哪些问题：布局的传统解决⽅案，基于盒状模型，依赖 display 属性 / position属性。它对于那些特殊布局⾮常不⽅便，⽐如，垂直居中就不容易实现。
Flex布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，可以简便、完整、响应式地实现各种⻚⾯布局。任何⼀个容器都可以指定为 Flex 布局。

flex布局-效果

一个最直观的例子，当有以下HTML代码时

<div class="box"><div class="children">box1</div><div class="children">box2</div><div class="children">box3</div><div class="children">box4</div>
</div>

默认状态显示为：

当给⽗元素设置成 ﬂex 容器后

.box {display: flex;}

效果变化如下：可以看到变成横向排列了，类似于 inline-block 的效果：

flex布局-两根轴线

两根轴线 — 主轴和交叉轴

我们使⽤ ﬂexbox 的所有属性都跟这两根轴线有关, 所以有必要在⼀开始⾸先理解它。

主轴由 ﬂex-direction 定义，⽽另⼀根轴（交叉轴）垂直于它。ﬂex-direction 主要有两个值：row 、column。

默认时值为row ，主轴即横向的这条线：即沿着inline 的⽅向排列，⽽交叉轴就是垂直于主轴的这条线：

当 ﬂex-direction 设置为 column 时。主轴即纵向的这条线：即沿着 block
排列的⽅向，⽽交叉轴就是垂直于主轴的这条线：

flex布局-容器属性

容器的常用属性
flex-direction：主轴⽅向
flex-wrap ：是否换⾏
justify-content ：主轴对⻬⽅式
align-items ：交叉轴对⻬⽅式

flex-direction

上文已介绍，此处省略

flex-wrap

ﬂex-wrap 常⽤有两个值：nowrap 、 wrap

.box{flex-wrap: wrap;}

flex-flow

wrap和direction的简写属性：flex-flow：row wrap

justify-content

justify-content 属性定义了项⽬在主轴上的对⻬⽅式。常⽤值有：
ﬂex-start（默认值）：左对⻬
ﬂex-end：右对⻬
center：居中
space-between：两端对⻬，项⽬之间的间隔都相等。
space-around：每个项⽬两侧的间隔相等

align-items

align-items 属性定义项⽬在交叉轴上如何对⻬。
ﬂex-start：交叉轴的起点对⻬。
ﬂex-end：交叉轴的终点对⻬。
center：交叉轴的中点对⻬。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容
器的⾼度。

flex布局-项目属性

在 ﬂex 容器下⾯的每⼀个元素，将其称之为“项目”
项⽬有很多属性，这里只介绍最常⽤的⼀个，那就是 ﬂex 属性，该属性实际上也是以下介绍的三个样式属性的简写。顺序为：增长，缩减，基础；这⾥描述⼀种写法：

html代码

<div class="box"><div class="children box1">box1</div><div class="children box2">box2</div><div class="children box3">box3</div><div class="children box4">box4</div>
</div>

css代码

.children {color: #fff;text-align: center;font-size: 28px;background: #1677ff;}.box2,.box4 {flex: 1;/* 这个数字代表“项⽬”所占容器主轴宽度的⽐例 */}.box1,.box3 {flex: 2;background-color: tomato;}

效果展示

flex-grow

指定弹性元素伸展的系数：当父元素有多余的空间时，子元素如何伸展
flex-grow：0（默认值），父元素的剩余空间会按照flex-grow设置的比例分配

flex-shrink

指定弹性元素收缩的系数：当父元素空间不足时，子元素如何收缩

flex-basis

指定的是元素在主轴上的基础长度，主轴是横向的则指定的是宽度，主轴是纵向的则指定的是元素高度
默认值是auto，表示参考元素自身的高度

order

决定元素的排列属性

布局实战

布局实战-flex实现水平·垂直居中

css代码

.box{display: flex; justify-content: center;align-items: center;}

效果展示

布局实战-实现卡片列表

要求：完成卡⽚的列表排列展示，每个组件之间有适当的间距。每个卡⽚上要添加8px的圆⻆，并带有阴影。

html代码

<div class="box-list"><ul id="card-list"><li class="card"><img class="box-img" src="../assets/pic-1.png"><p class="box-title">波浪</p><p class="box-author">by kk</p><p class="box-description">木落雁嗷嗷，洞庭波浪高</p></li><li class="card"><img class="box-img" src="../assets//pic-2.png"><p class="box-title">落日</p><p class="box-author">by kk</p><p class="box-description">长河落日圆</p></li><li class="card"><img class="box-img" src="../assets//pic-3.png"><p class="box-title">礁石</p><p class="box-author">by kk</p><p class="box-description">东临碣石，以观沧海</p></li></ul>
</div>

css代码

p {margin: 0;}.card {display: inline-block;margin-right: 16px;padding: 10px;width: 200px;height: 300px;border-radius: 8px;box-shadow: 0 30px 30px 0 rgba(140, 153, 191, 0.20);}.card > p {font-size: 18px;/* 超过一行显示"..." */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.box-img {width: 100%;height: 120px;object-fit: cover;}.box-title {margin-top: 24px;font-size: 24px;font-weight: bold;}.box-description {margin-top: 12px;color: gray;}

效果展示

布局实战-实现导航目录

要求：完成导航⽬录的排列展示，每个导航分类之间有适当的间距。导航标题与下⽅链接也要有⼀定的间距。

html代码

<div class="container"><div class="nav"><p class="nav-title">书籍</p><ul class="nav-list"><a class="nav-self" href="">《CSS权威指南》</a><a class="nav-self" href="">《Javascript权威指南》</a><a class="nav-self" href="">《深入浅出Node.js》</a><a class="nav-self" href="">《HTML5权威指南》</a></ul></div><div class="nav"><p class="nav-title">资源</p><ul class="nav-list"><a class="nav-self" href="">MDN</a><a class="nav-self" href="">掘金</a><a class="nav-self" href="">Stack Overflow</a></ul></div><div class="nav"><p class="nav-title">进阶</p><ul class="nav-list"><a class="nav-self" href="">Vue</a><a class="nav-self" href="">React</a><a class="nav-self" href="">小程序</a><a class="nav-self" href="">Ant Design</a></ul></div>
</div>

css代码

p {margin: 0;
}
ul {list-style: none;padding: 0;
}
.nav {display: inline-block;vertical-align: top;margin-right: 16px;width: 200px;
}
.nav-title {color: #999;font-size: 32px;font-weight: bold;
}
.nav-list {margin-top: 32px;
}
.nav-self {display: block;color: rgb(60, 133, 243);text-decoration: none;
}

效果展示

【前端学习笔记】09全方位了解flex布局相关推荐

前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
Web前端学习笔记09：移动web开发流式布局_flex布局
文章目录移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 i ...
前端学习笔记7：响应式布局和简单动画效果
一.响应式布局当我们在利用浏览器的放大缩小的时候,经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度,这时候我们就引入一个概念叫做响应式布局(Responsive layout).它 ...
【前端学习笔记】(五)（CSS布局盒子模型）
目录盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...
ReactNative学习笔记（二）Flex布局
flexDirection 决定主轴方向 column:垂直方向为主轴 row:水平方向为主轴 justifyContent 决定主轴元素排列方式 flex-start flex-end center ...
「学习笔记」黑马面面布局开发
「学习笔记」黑马面面布局开发黑马面面布局开发一.目的 1.1 技术方案 1.2 代码规范 1.2 目录规范二.流程开发 2.1 蓝湖/摹客协作平台 2.2 适配方案 2.3 初始化文件 2.4 ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

【前端学习笔记】09全方位了解flex布局

文章目录

flex布局

flex布局-介绍

flex布局-效果

flex布局-两根轴线

flex布局-容器属性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

flex布局-项目属性

flex-grow

flex-shrink

flex-basis

order

布局实战

布局实战-flex实现水平·垂直居中

布局实战-实现卡片列表

布局实战-实现导航目录

【前端学习笔记】09全方位了解flex布局相关推荐

最新文章

热门文章