Flex layout and case exercises for mobile web development

After learning the flex layout of mobile web development, make a summary for yourself.

Comparison of traditional layout and flex layout

1. Traditional layout :

• good compatibility
• cumbersome layout
• Limitations, no good layout on the mobile side

2.flex layout :

• The operation is convenient, the layout is extremely simple, and the mobile terminal is widely used
• PC-side browser support is relatively poor
• IE11 or lower versions do not support flex or only partially

It is recommended that if you are developing a mobile terminal, or you can use the flex layout without considering the compatible PC terminal.

Principle of flex layout

• flex is the abbreviation of flexible Box, which means "elastic layout", which is used to provide maximum flexibility for the box model, and any container can be designated as a flex layout.
• When we set the flex layout for the parent box, the float, clear and vertical-align properties of the child elements will be invalid.
• Flex layout is also called flexible layout, flexible layout, flexible box layout, flexible box layout
• The elements that adopt the Flex layout are called the Flex container (flexcontainer), or "container" for short. All of its child elements automatically become members of the container, called Flex items (flexitem), referred to as "items".

So in general, flex layout is to control the position and arrangement of child boxes by adding flex attributes to the parent box. The parent box can be any container element.
The way to enable flex layout for the parent element is:
display：flex；
set this property to enable it.

Parent Common Properties

1.flex-direction: Set the direction of the main axis .
In the flex layout, there are two orientations, the main axis and the lateral axis, combined with the x and y axes in mathematics.
The default main axis is the x-axis, and the side axis is the y-axis, but we can use this property to change 改变the direction of the main side axis.
In the layout, we often use the y-axis as the main axis to arrange the child flex items vertically.

The following picture shows the corresponding value of this attribute and its effect:

Among them, the attribute value in red font is more commonly used~

2.justify-content : Set the arrangement of sub-elements on the main axis .
The following picture shows the corresponding value of this attribute and its effect:

this allows us to control the arrangement order of the sub-elements in the main axis, which saves us a lot of effort~

3.flex-wrap: set whether to wrap .
There are only two values ​​for this attribute:

• nowrap : do not wrap
• wrap : newline

By default, items are arranged along a line (aka "axis"). The flex-wrap attribute defines that the default in the flex layout is not to wrap.
To put it simply, you will find that after you enable the flex layout of the parent element, how many sub-items you create will be displayed in one line, but the width of the sub-items inside will be reduced. displayed on the second line.

4.align-items : Set the arrangement of sub-elements on the side axis (single line) .
This attribute is used to control the arrangement of sub-items on the side axis (the default is y-axis). It is used when the sub-item is a single item (single line). Remember, it must be when the sub-item is a single line, because it controls multi-line sub-items Sometimes there are other attributes.

• flex-start : start from the head
• flex-end : start at the end
• center : display in the center
• stretch: Stretching
  We often combine setting the main axis as the y-axis and setting the child elements of the side axis to be centered, so that the two horizontal elements can be changed to the upper and lower elements.

5.align-content Set the arrangement of child elements on the side axis (multiple lines) .
Set the arrangement of sub-items on the side axis and can only be used when the sub-items appear in newlines (multiple lines). This is for multiple lines, and it has no effect in a single line.

The difference between align-content and align-items:

• align-items is suitable for single-line cases, only top alignment, bottom alignment, centering and stretching
• align-content is suitable for newlines (multiple lines) (invalid for single lines), you can set attribute values ​​such as top alignment, bottom alignment, centering, stretching, and evenly distributing the remaining space.
• The summary is to find align-items in a single line and align-content in multiple lines

6. The flex-flow attribute is a composite attribute of the flex-direction and flex-wrap attributes .
Needless to say, this is just a combination, and demonstrate one:
flex-flow:row wrap;x is the main axis, and it is displayed in a new line.

Common properties of flex layout children

1.flex attribute :
The flex attribute defines the sub-item to allocate the remaining space, and use flex to indicate the number of copies.
Here, if we set 1 for each sub-item, then it equalizes the width of the parent element.

.item {
    
    
    flex: <number>; /* 默认值 0 */
}

2.align-self: Control how the subitem itself is arranged on the side axis .

If we want a sub-item to have its own way of being arranged on the side axis, that is, to override the align-items attribute of the parent element, we can use this attribute.
The default value is auto, which means inheriting the align-items attribute of the parent element. If there is no parent element, it is equivalent to stretch.

span:nth-child(2) {
    
    
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

3. The order attribute defines the sort order of the items .
The meaning of this attribute is simply that a bunch of sub-items are queued in the normal order, and a sub-element we want to define is behind. We want to jump in the queue. What should we do? We can use this attribute. The smaller the value, the better the arrangement The more forward, the default is 0. Of course, jumping in line is wrong.
Note: Unlike z-index, z-index is to arrange the order of elements up and down.

.item {
    
    
    order: <number>;  还可以取负数哟。
}

Ctrip mobile terminal homepage case practice

1. First set up the project environment.

Then we start setting up the initialization.

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<!--视图标签 设置手机端和pc端一比一，不允许用户缩放，最大和最小缩放都是1 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!-- 引入css初始化文件 -->
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<!-- 引入首页css样式文件 -->
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<title></title>
	</head>
	<body>
	</body>
</html>

Add default styles to the body combined with specific requirements, as well as some other label default styles.

/* 初始化body标签 */
body {
    
    
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #fff;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
	height: 1000px;
}

a {
    
    
	text-decoration: none;
	color: #222;
}
div {
    
    
	box-sizing: border-box;   /* 将div都转换为css3盒子模型 */
}
ul {
    
    
	margin: 0;
	padding: 0;    /* 出去ul默认的样式 */
	list-style: none;
}

2. Search bar part made .
html part:

<div class="search-index">
			<div class="search">
				<span>搜索:目的地/酒店/景点/航班号</span>
			</div>
			<a href="#" class="user">
				<span>我 的</span>
			</a>
		</div>

css part:

/* 搜索栏部分 */
.search-index {
    
    
	display: flex;
	position: fixed;
	width: 100%;      /* 固定定位的元素要给宽度哟 */
	max-width: 540px;
	min-width: 320px;
	height: 44px;
	transform: translateX(-50%);
	left: 50%;            /* 这里运用到了另一种居中的方法  向左偏移屏幕50%，然后向右偏移自身的50% */
	color: #666;
	font-size: .94rem;
	
}

.search {
    
    
	flex: 1;   /* 运用flex布局，左边部分直接划分为剩余的全部空间 */
	height: 28px;
	line-height: 28px;
	background-color: #fff;
	border-radius: 15px;
	margin: 7px 3px 0 11px;
	padding-left: 40px;
	position: relative;
}
.search::before {
    
    
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 35px;
	height: 100%;
	background: url(../images/un_ico.png) no-repeat 15px 7px;
	background-size: 21px auto;
}


.user {
    
    
	display: block;
	width: 51px;
	height: 44px;
	font-size: 12px;
	text-align: center;
	color: #fff;
}
.user::before {
    
    
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background: url(../images/un_ico.png) no-repeat 1px -36px;
	background-size: 21px auto;
	margin: 4px auto 1px;
}

This part is for fixed positioning. We give the outermost box a width of 100%, which can be adaptive, but we also need to give a maximum width and a minimum width, otherwise the fixed positioning element will be as wide as the screen relative to the screen. .
We also found that the box is not centered, so we need to center it. Here we use the element to float 50% to the left, and let it float to the right by half of its own width (transform: translateX(-50%);) It can be realized.
Seeing that there are child elements inside, we let the parent box open the flex layout, give the right part a fixed width, and then the two block-level elements will be two lines up and down, and we directly set the left part so that it will automatically occupy the remaining space, and flex：1；then Give it a margin value to make its width smaller, and a padding value to make it move to the right to make room for the magnifying glass inside. The magnifying glass inside uses absolute positioning to make it out of the normal document flow.

3. Background image part .
html part:

<!-- 背景图 -->
		<div class="header-bg">
		</div>

css part:

/* 背景图 */
.header-bg {
    
    
	width: 100%;
	height: 198.72px;
	background: url(../images/bg.jpg) no-repeat;
	background-size: 100% 100%;
	border-radius: 0 0 30px 30px;
}

There is not much to say in this part. The upper module is separated from the normal document flow. We set the width and height, and inserting the background image can be automatically placed under the upper module.

4. Local navigation bar .
Let me talk about a little knowledge first:

In the flex layout, we change the two horizontal elements into two vertically centered elements, and we can use the method shown in the figure above.
html part:

<ul class="local-nav">
			<li>
				<a href="#" title="攻略景点">
					<span class="local-nav-icon-icon1"></span>
					<span>攻略·景点</span>
				</a>
			</li>
			<li>
				<a href="#" title="门票玩乐">
					<span class="local-nav-icon-icon2"></span>
					<span>门票·玩乐</span>
				</a>
			</li>
			<li>
				<a href="#" title="美食林">
					<span class="local-nav-icon-icon3"></span>
					<span>美食林</span>
				</a>
			</li>
			<li>
				<a href="#" title="周边游">
					<span class="local-nav-icon-icon4"></span>
					<span>周边游</span>
				</a>
			</li>
			<li>
				<a href="#" title="一日游">
					<span class="local-nav-icon-icon5"></span>
					<span>一日游</span>
				</a>
			</li>
		</ul>

css part:

* 局部导航栏 */
.local-nav {
    
    
	display: flex;
	margin: -35px 12px 10px;
	padding: 4px 0 8px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,.1);
	background-color: #fff;
}
.local-nav li {
    
    
	flex: 1;
	
}
.local-nav a {
    
    
	display: flex;
	flex-direction: column;   /* 这里将内部flex布局主轴变为y，在将侧轴居中对齐 */
	align-items: center;
	font-size: 12px;
}

.local-nav li [class^="local-nav-icon"] {
    
    
	width: 40px;
	height: 40px;
	background: url(../images/home-fivemain.15.png) 0 0 no-repeat;
	background-size: 40px auto;
}
.local-nav li .local-nav-icon-icon2 {
    
    
	background-position: 0 -40px;
}
.local-nav li .local-nav-icon-icon3 {
    
    
	background-position: 0 -80px;
}
.local-nav li .local-nav-icon-icon4 {
    
    
	background-position: 0 -120px;
}
.local-nav li .local-nav-icon-icon5 {
    
    
	background-position: 0 -160px;
}

Here we enable the flex layout of the parent box, and let the sub-items flex：1;divide the small li evenly at once. Since the width of the parent box inherits from the body, these sub-elements are also self-adaptive.
There is a tag in the small li, and there are two spans in the a tag. We use the method described above to enable the flex layout of the a tag, the main axis becomes the y axis, and the alignment of the side axis is centered, so that the icons and text are aligned Aligned vertically.
Another thing to note is that the icons here are different, but they are sprites. We only need to change the position of the sprites to switch the background image effect, instead of directly changing the picture. Here we use an attribute selector, select the beginning of class='local-nav-icon', because these sub-elements have this beginning, set a common style for them, and then set the background image position for each sub-element individually.

5. Main navigation bar .
html part:

<!-- 主导航栏 -->
		<nav>
			<div class="nav-common">
				<a href="#" class="nav-items">
					<span>酒店</span>
				</a>
				<a href="#" class="nav-items">
					<span>民宿·客栈</span>
				</a>
				<a href="#" class="nav-items">
					<span>机票/火车票+酒店 </span>
				</a>
			</div>
			<div class="nav-common">
				<a href="#" class="nav-items">
					<span>机票</span>
				</a>
				<a href="#" class="nav-items">
					<span>火车票</span>
				</a>
				<a href="#" class="nav-items car">
					<span>汽车·船票</span>
					<span>专车·租车</span>
				</a>
			</div>
			<div class="nav-common">
				<a href="#" class="nav-items">
					<span>酒店</span>
				</a>
				<a href="#" class="nav-items">
					<span>民宿·客栈</span>
				</a>
				<a href="#" class="nav-items car">
					<span>邮轮游</span>
					<span>定制游</span>
				</a>
			</div>
		</nav>

css part:

/* 主导航栏部分 */
nav {
    
    
	margin: 0 12px 1px;
	border-radius: 8px;
	overflow: hidden;
}
.nav-common {
    
    
	display: flex;
	height: 66px;
}
.nav-common:nth-child(2) {
    
    
	margin: 1px 0;
}
.nav-common a {
    
    
	color: #fff;
	font-size: 14px;
	line-height: 66px;
}
/* 第一行 */
.nav-items:nth-child(1) {
    
    
	flex: 30%;
	padding-left: 12px;
	border-right: 1px solid #fff;
	background: url(../images/grid-nav-items-hotel.png) no-repeat;
	background-size: 73px auto;
	background-position: right bottom;
	background-color: #fa6b53;
}
.nav-items:nth-child(2) {
    
    
	flex: 23%;
	text-align: center;
	border-right: 1px solid #fff;
	background: url(../images/grid-nav-items-minsu.png) no-repeat;
	background-size: 37px auto;
	background-position: left bottom;
	background-color: #fb8251;
}
.nav-items:nth-child(3) {
    
    
	flex: 47%;
	text-align: center;
	background: url(../images/grid-nav-items-jhj.png) no-repeat;
	background-size: 86px auto;
	background-position: right bottom;
	background-color: #ffbd49;
}

/* 第二行及第三行 */ 

.car {
    
    
	display: flex;
}
.car span {
    
    
	flex: 1;
}
.car span:nth-child(1) {
    
    
	border-right: 1px solid #fff;
}
.nav-common:nth-child(2) .nav-items {
    
    
	background-color: #4d99ed;
}
.nav-common:nth-child(3) .nav-items {
    
    
	background-color: #47c88d;
}

The real method of the background color of each row in this part is to use the background linear gradient. My method is wrong.
Background linear gradient syntax:

background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue);
背景渐变必须添加浏览器私有前缀 起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top

The flex attribute is also used to make this section, to divide the size of the sub-elements, and to divide the size of each sub-element according to the specific project, and it may be necessary to divide it in the sub-elements. Here is the 1px upper line outer margin given in the second line, and the inner sub-elements are given 1px white left and right borders for the middle two.

6. Icon navigation section .
html part:

<!-- 图标导航部分 -->
		<ul class="subnav-entry">
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon1"></span>
					<span>自由行</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon2"></span>
					<span>WiFi电话卡</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon3"></span>
					<span>保险·签证</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon4"></span>
					<span>换钞·购物</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon5"></span>
					<span>当地向导</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon6"></span>
					<span>特价机票</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon7"></span>
					<span>礼品卡</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon8"></span>
					<span>申卡·借钱</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon9"></span>
					<span>旅拍</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="subnav-entry-icon-icon10"></span>
					<span>更多</span>
				</a>
			</li>
			
		</ul>

css part:

/* 图标导航部分 这一部分和上面底部导航栏类似 */
.subnav-entry {
    
    
	display: flex;
	flex-wrap: wrap;    /* 让小li换行显示 */
	margin: 0 12px 12px;
	border-radius: 8px;
	overflow: hidden;
}
.subnav-entry li {
    
    
	flex: 20%;  /* 这里让每个小li占百分之20，就可以让10个小li分二行显示 */
}

.subnav-entry a {
    
    
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 12px;
}
.subnav-entry a [class^="subnav-entry-icon"] {
    
    
	width: 28px;
	height: 28px;
	background: url(../images/un_ico_subnav2x.png) no-repeat;
	background-size: 28px auto; 
}
.subnav-entry a .subnav-entry-icon-icon2 {
    
    
	background-position: 0 -28px ;
}
.subnav-entry a .subnav-entry-icon-icon3 {
    
    
	background-position: 0 -56px ;
}
.subnav-entry a .subnav-entry-icon-icon4 {
    
    
	background-position: 0 -84px ;
}
.subnav-entry a .subnav-entry-icon-icon5 {
    
    
	background-position: 0 -112px ;
}
.subnav-entry a .subnav-entry-icon-icon6 {
    
    
	background-position: 0 -140px ;
}
.subnav-entry a .subnav-entry-icon-icon7 {
    
    
	background-position: 0 -168px ;
}
.subnav-entry a .subnav-entry-icon-icon8 {
    
    
	background-position: 0 -196px ;
}
.subnav-entry a .subnav-entry-icon-icon9 {
    
    
	background-position: 0 -224px ;
}
.subnav-entry a .subnav-entry-icon-icon10 {
    
    
	background-position: 0 -252px ;
}

This part is very similar to the above navigation. What I want to say here is to let the parent element open line break, and then give each child element flex：20%, so that 10 small li can be displayed in two lines. Of course, this is calculated, ten two OK, then each width is 0.2. Then, the vertical centering of text and icons is also the above method, and the switching of icons here is also the above method, because the sprite image is also used as the background here.

7. Sales section.
html part:

<!-- 销售板块 -->
		<div class="sales-box">
		    <div class="sales-hd">
		        <h2>热门活动</h2>
		        <a href="#" class="more">获取更多福利</a>
		    </div>
		    <div class="sales-bd">
		        <div class="row">
		            <a href="#">
		                <img src="upload/pic1.jpg" alt="">
		            </a>
		            <a href="#">
		                <img src="upload/pic2.jpg" alt="">
		
		            </a>
		        </div>
		        <div class="row">
		            <a href="#">
		                <img src="upload/pic3.jpg" alt="">
		            </a>
		            <a href="#">
		                <img src="upload/pic4.jpg" alt="">
		
		            </a>
		        </div>
		        <div class="row">
		            <a href="#">
		                <img src="upload/pic5.jpg" alt="">
		            </a>
		            <a href="#">
		                <img src="upload/pic6.jpg" alt="">
		
		            </a>
		        </div>
		
		    </div>
		</div>

css part:

/* sales-box */

.sales-box {
    
    
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin: 4px;
}

.sales-hd {
    
    
    position: relative;
    height: 44px;
    border-bottom: 1px solid #ccc;
}

.sales-hd h2 {
    
    
    position: relative;
    text-indent: -999px;
    overflow: hidden;
}

.sales-hd h2::after {
    
    
    position: absolute;
    top: 5px;
    left: 8px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../images/hot.png) no-repeat 0 -20px;
    background-size: 79px auto;
}

.more {
    
    
    position: absolute;
    right: 5px;
    top: 0px;
    background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
    border-radius: 15px;
    padding: 3px 20px 3px 10px;
    color: #fff;
}

.more::after {
    
    
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

.row {
    
    
    display: flex;
}

.row a {
    
    
    flex: 1;
    border-bottom: 1px solid #eee;
}

.row a:nth-child(1) {
    
    
    border-right: 1px solid #eee;
}

.row a img {
    
    
    width: 100%;
}

This section is divided into upper and lower parts. The upper part is to give the whole big box an upper border, and then give the upper part of the box a lower border to have the effect of the upper two borders. Inside are two background images, and then both It is absolute positioning, positioning to the two sides, and let me say that the small triangle in the right picture is rotated by 45° in css3, and then it can be realized by setting the upper and right borders.
The following part is even simpler, each row is two pictures, and then start the flex layout on the parent element, give each row two child elements with a flex of 1 to divide the width of a row equally, and then insert the picture, remember to give each row of child elements Set the bottom border, and then set the right border for the first child element of each row.
After completing this exercise, I still benefit a lot. I am a little familiar with the usage of flex layout. Compared with the learned flow layout, it is more simple and convenient, and it is more conducive to our development of mobile web pages.