flex布局的语法和案例

最新推荐文章于 2024-01-31 15:10:29 发布
最新推荐文章于 2024-01-31 15:10:29 发布
阅读量211 收藏 2
点赞数

Flex 布局

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

本文参考阮一峰老师的《Flex布局：语法篇》，在实践过程中，添加了一些案例，方便理解

详细参考Flex 布局教程：语法篇

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1
2
3
4
> .box{
> display: flex;
> }
>

行内元素也可以使用 Flex 布局。

1
2
3
4
> .box{
> display: inline-flex;
> }
>

Webkit 内核的浏览器，必须加上-webkit前缀。

1
2
3
4
5
> .box{
> display: -webkit-flex; /* Safari */
> display: flex;
> }
>

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

案例

当一个布局需要自适应或者，一边固定宽度，其他自适应的情况下，使用flex布局

当想要使用flex布局的时候，找到其父元素，给父元素的类添加display:flex即可，在固定宽度的位置固定宽度，其他需要自适应的兄弟元素，分配flex，意思就是父盒子总宽度 - 固定宽度为剩余总宽度，把剩余需要自适应的兄弟元素按照需要的比例去分配剩余总宽度，案例代码如下：

案例一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flex布局1</title>
	<style type="text/css">
		/*
			使用 flex 流程
				1.设计 DOM 结构
				2.将父盒子设置为伸缩盒子  display: flex;
				3.固定一边宽度，另一边设置flex: 1;就实现了
		 */
		html, body {
			height: 100%;
		}
		.root {
			/*padding-left: 100px;*/
			display: flex;
			border: 2px solid #c0c0c0;
			height: 100%;
		}
		.sidebar {
			width: 100px;
			background-color: yellow;
		}
		.content {
			/*width: 100%;*/
			flex: 1;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="root">
		<div class="sidebar">
			
		</div>
		<div class="content">
			
		</div>
	</div>
</body>
</html>

案例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flex2</title>
	<style type="text/css">
		.container {
			display: flex;
			width: 400px;
			height: 300px;
		}
		.item {
			flex: 1;
			/*每一项占一份*/
		}
		.item:nth-child(even) {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="container">
		<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>

案例三：音乐播放器主界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
// index.wxml
<view class="root">
  <!-- 标签栏的页签 固定高度 -->
  <view class="tabs">
    <view class="item active">
      <text>个性推荐</text>
    </view>
    <view class="item">
      <text>歌单</text>
    </view>
    <view class="item">
      <text>主播电台</text>
    </view>
    <view class="item">
      <text>排行榜</text>
    </view>
  </view>
  <!-- 内容区域 自适应高度 -->
  <scroll-view class="content" scroll-y>
    <swiper class="slide" autoplay indicator-dots>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
      <swiper-item>
        <image src="../../images/slide.png"></image>
      </swiper-item>
    </swiper>
    <view class="portals">
      <view class="item">
        <image src="../../images/04.png"></image>
        <text>私人FM</text>
      </view>
      <view class="item">
        <image src="../../images/05.png"></image>
        <text>每日歌曲推荐</text>
      </view>
      <view class="item">
        <image src="../../images/06.png"></image>
        <text>云音乐新歌榜</text>
      </view>
    </view>
    <view class="list">
      <view class="title">
        <text>推荐歌单</text>
      </view>
      <view class="inner">
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
        <view class="item">
          <image src="../../images/poster.jpg"></image>
          <text>一生中最爱的是谁谁？</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <!-- 播放控制条条 固定高度 -->
  <view class="player">
    <view class="poster">
      <image src="../../images/poster.jpg"></image>
    </view>
    <view class="info">
      <text class="title">一生中最爱</text>
      <text class="artist">谭咏麟</text>
    </view>
    <view class="controls">
      <image src="../../images/01.png"></image>
      <image src="../../images/02.png"></image>
      <image src="../../images/03.png"></image>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
// index.wxss
page {
  height: 100%;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f0f0f0;
}

.tabs {
  display: flex;
  background-color: pink;
}

.tabs .item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  background-color: #222;
  color: #ccc;
  padding: 8px 0;
}

.tabs .item.active {
  color: #fff;
  border-bottom: 2px solid #e9232c;
}

.content {
  flex: 1;
  background-color: #111214;
  color: #ccc;
  overflow: hidden;
}

.slide image {
  width: 100%;
  height: 130px;
}

.portals {
  display: flex;
  margin-bottom: 15px;
}

.portals .item {
  flex: 1;
}

.portals .item image {
  width: 60px;
  height: 60px;
  display: block;
  margin: 10px auto;
}

.portals .item text {
  display: block;
  font-size: 12px;
  text-align: center;
}

.list .title {
  margin: 5px 10px;
  font-size: 14px;
}

.list .inner {
  display: flex;
  flex-wrap: wrap;
}


.list .inner .item {
  width: 33.33333333%;
}

.list .inner .item image {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.list .inner .item text {
  font-size: 14px;
}

.player {
  display: flex;
  height: 50px;
  background-color: #17181A;
}

.poster image {
  width: 40px;
  height: 40px;
  margin: 5px;
}

.info {
  flex: 1;
  color: #888;
  font-size: 14px;
  margin: 5px;
}

.info .title{
  display: block;
  font-size: 16px;
  color: #ccc;
}

.controls image {
  width: 40px;
  height: 40px;
  margin: 5px 2px;
}
1
2
3
4
5
6
// index.json
{
  "navigationBarTitleText": "Music Player",
  "navigationBarBackgroundColor": "#333",
  "navigationBarTextStyle": "white"
}

三、各种属性

  1. flex-direction调整主轴方向（默认为水平方向）
  2. justify-content调整主轴对齐
  3. align-items调整侧轴对齐（子元素可以使用align-self覆盖）
  4. flex-wrap控制是否换行
  5. align-content堆栈（由flex-wrap产生的独立行）对齐
  6. flex-flow是flex-direction + flex-wrap的简写形式
  7. flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
  8. order控制子项目的排列顺序，正序方式排序，从小到大
六六子大顺1
关注
flex布局实例
weixin_45732235的博客
03-26 242
实现效果
flex项目转换为html5,Flex布局做出自适应页面(语法和案例)
weixin_29150151的博客
05-31 467
Flex布局简介Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为：.box{display: flex;}行内元素使用Flex布局.box{display: inline-flex;}在webkit内核的浏览器上必须加上webkit前缀.box{display: flex;d...
flex布局---典型案例
wind的博客
08-20 468
1.左右固定，中间自适应 <div class="box"> <div class="left"></div> <div class="content"></div> <div class="right"></div> </div> .box { display: flex; height: 200px; } .left { width: 200px; back
flex 布局案例
一抹茶-CSDN的博客
05-26 584
1.无flex布局的 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="container"
flex 布局实例
weixin_30725467的博客
07-30 275
1.首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wi...
flex布局示例
zyzhan
11-22 448
eg:1 <div class="container"> <div class="item"> </div> </div> .container{ width: 300px; height: 300px; background-color: skyblue; display: flex; justify-content: center; // 横向居中 align-items: center; // 垂直居中 } .item{
Flex布局学习资料
11-10
《Flex 布局教程：语法篇.pdf》可能更深入地探讨了Flex布局的语法细节，包括更多高级用法和特殊情况的处理，例如： 1. **Flex-wrap属性**：控制是否换行，`nowrap`表示不换行，`wrap`表示换行，`wrap-reverse`则...
移动端布局-flex布局
weixin_49455047的博客
12-06 852
一.flex布局体验 1.1传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2初体验 1.搭建HTML结构 <body> <div> <span></span> <span></span> <span></span>.
前端开发最详细、最易懂的Flex弹性布局（含案例）
管乐明的博客
04-13 1697
Flex弹性布局 1、flex发展历史 2009年W3C 提出概念，但是官方没有flex这个词。当时使用display:box;表示弹性布局 2011年浏览器厂商决定使用flexbox，来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定 2、flex定义 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐、排
Flex 布局教程：实例篇
weixin_51341611的博客
03-21 1170
介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅。我的主要参考资料是的文章和。
Flex布局案例说明
weixin_57766522的博客
05-25 107
1.首先在这里看到一个格式这里给了一个div是他的父盒子那么这个父盒子叫做box里面给了三个小盒子叫item 2.box就是父盒子他先给了一个宽高，margin就是为了父盒子和浏览器有一定的距离，padding就是让里面的子盒子和父盒子边框有一定的距离，然后在给到背景颜色，然后在给到border-radius就是父盒子的一个圆角效果的10像素，然后box-shadow给到的是阴影部分inset他是内阴影设置，然后最主要是要让display: flex作为转换 3.然后bo..
干货~从实例中带你掌握flex布局
lc941015的博客
01-23 6859
（一）flex布局的兼容性 既然要用这种布局，就不得不考虑它的兼容性，先上图 从图可以看到，flex布局是不支持ie8，9的，所以建议，如果要做兼容ie8的pc端项目，还是老老实实用浮动布局吧~！但是现在是H5的时代，移动端我们还是放心大胆用吧，请抛弃恶心的清除浮动！ （二）flex布局的语法 我就不分析内主轴跟交叉轴了，有点难懂，抛开这个概念，我以我的口吻来介绍flex布局的语法
flex布局_Flex常见布局实例
weixin_39629631的博客
11-30 224
如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex布局 · Issue #6 · xiangxingchen/blog​github.com1、网格布局1.1、基本网格布局最简单的网格布局，就是平均分布。 HTML代码如下。<CSS代码如下。.这里最关键的就是flex:1使得各个子元素可以等比伸缩 1.2、百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 ...
flex布局HTML实例,flex布局实例深入全面总结
weixin_28706923的博客
06-15 267
2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。通过笔者大量实践，发现flex布局屡试不爽，尤其在移动端自适应方面。但处于其大量的属性记忆混乱，今天图文并茂梳理如下。语法及概念部分实例演示部分结合笛卡尔坐标系(仅考虑一个item情况，其它情况可以据此的排列组合实现)css...
Flex布局使用（含实例代码）
Delicia_Lani的博客
08-03 429
一、什么是Flex布局？ Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 任何一个容器都可以指定为Flex 布局。 1 2 3 .box{ display:flex; } 　　行内元素也可以使用Flex布局。 1 2 3 ...
【CSS3】flex布局实践篇 | 7种常见网页布局方案
最新发布
weixin_57031986的博客
01-31 3536
【CSS3】flex布局实践篇 | 7种常见网页布局方案
flex布局HTML实例,CSS3 Flex 弹性布局实例代码详解
weixin_36197248的博客
06-15 319
一、基本概念//任何一个容器都可以指定为Flex布局。.box{display: flex;}//行内元素也可以使用Flex布局。.box{display: inline-flex;}//注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。二、容器属性1. flex-directionflex-direction 决定项目的排列方向.box {fle...
掌握Flex布局：自适应页面的语法与实战案例
2. **轴系统**： Flex布局定义了两个轴，主轴（main axis）和侧轴（cross axis），默认为主轴为水平方向，侧轴为垂直方向。可以通过`flex-direction`属性改变排列方向。 3. **flex-direction** 属性：控制项目在容器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值