This is the third day of my participation in the August Text Challenge.More challenges in August
Today we will learn the basic syntax of Flex layout in 10 minutes, and then write a static ctrip mobile web page using Flex with YK bacteria
Reference & Recommended reading
Flex Layout Tutorial: Syntax section
Flex Layout Tutorial: Sample article
1. What is Flex
Flex (Flexible box)
- CSS3 is another layout means
- It is mainly used instead of floating to complete the layout of the page
- Flex makes elements elastic, allowing them to change as the page size changes
Any container can be specified as a Flex layout
- When the parent box is set to flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated
- Elements that use flex layout are called Flex containers, elastic containers, or containers for short
- All of its child elements automatically become container members and become Flex items (Items), or item items for short
Summary of Flex layout principles: Control the placement and arrangement of child boxes by adding Flex properties to the parent box
2. Side axis: perpendicular to the main axis (later also called cross axis).
2. Elastic container
To use an elastic box, you must first set an element as an elastic container (parent box) and set the elastic container through display
.box{
display: flex; /* Set to block-level elastic container */Dispaly: inline-flex /* Set to inline elastic container */}Copy the code
- With Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated
Summary of properties for common containers
Common container properties | Attribute function |
---|---|
flex-direction | Set the spindle direction |
justify-content | Sets the arrangement of the spindle child elements |
flex-wrap | Sets whether a child element is newline |
align-content | Sets the arrangement of child elements on the side axis (multiple rows) |
align-items | Sets the arrangement of child elements on the side axis (single line) |
flex-flow | Compound property, equivalent to setting flex-direction and flex-wrap |
Flex-direction Specifies the arrangement direction
Attributes determine the orientation of the main axis (that is, the alignment of items)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
Attribute values | instructions |
---|---|
Row (default) | 【 From left to right 】 The main axis is horizontal, and the starting point is at the left end. |
row-reverse | [From right to left] The main axis is horizontal and the starting point is at the right end. |
column | 【 From top to bottom 】 The main axis is vertical, and the starting point is on the top. |
column-reverse | [From bottom to top] The main axis is vertical, and the starting point is along the bottom. |
How does flex-wrap wrap
By default, items are arranged on a line (also known as an “axis”) (if the display is not open, the width of the child element is reduced). The flex-wrap property defines how to wrap a line if an axis does not fit.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code
attribute | instructions |
---|---|
Nowrap (default) | Don’t break. |
wrap | Newline, the first line is at the top. |
wrap-reverse | Newline, first line below. |
The flex – flow shorthand
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is row nowrap.
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
Copy the code
Context-content Specifies the alignment of the main axis
The context-content attribute defines the alignment of items on the main axis.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Copy the code
Attribute values | Alignment (using the default spindle as an example) |
---|---|
Flex-start (default) | The left |
flex-end | Align right |
center | Align center |
space-between | Trim, average remaining space |
space-around | Average remaining space |
space-evenly | Uniform distribution |
space-between
: Align both ends with equal spacing between items.
space-around
: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border. space-evenly
: Uniform distribution (poor compatibility)
Align-items Alignment of the side axis
The align-items property defines how items are aligned on the cross axis.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
Attribute values | instructions |
---|---|
flex-start | Align the starting point of the cross axis |
flex-end | Align the ends of the cross axes |
center | Align the midpoint of the cross axis |
baseline | Baseline alignment of the first line of text for the project |
Stretch (default) | (Stretch) If the item is not set to height or is set to Auto, it will fill the entire container height |
Align-content Side axis alignment (multiple lines)
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. (Single line invalid)
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Copy the code
Attribute values | instructions |
---|---|
flex-start | Align with the starting point of the cross axis |
flex-end | Align with the endpoint of the cross axis |
center | Align with the midpoint of the intersecting axis |
space-between | Align with both ends of the cross axes and evenly distribute the spacing between the axes |
space-around | Both sides of each axis are equally spaced. Therefore, the spacing between axes is twice as large as the spacing between axes and borders |
Stretch (default) | The axis covers the entire cross axis |
Note the difference between align-content and align-items
- Align-items work on a single line, with only up-aligned, down-aligned, centered, and stretched
- Align-content applies to multiple lines (newlines). Single lines do not work. You can set the values of align up, align down, center, stretch, and evenly allocate the remaining space
3. Elastic element item
The (direct) children of an elastic container are elastic elements (elastic terms) An element can be both an elastic container and an elastic element
flex-grow
The flex-grow attribute defines how the child element is extended when the parent element has extra space. The default is 0, or no enlargement if there is extra space.
.item {
flex-grow: <number>; /* default 0 */
}
Copy the code
The remaining space of the parent element is allocated proportionally
flex-shrink
The Flex-shrink attribute defines how the child elements scale when there is not enough space in the parent element to accommodate all the child elements. The default is 1, that is, if there is not enough space, the project shrinks.
.item {
flex-shrink: <number>; /* default 1 */
}
Copy the code
If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient. Negative values have no effect on this property.
flex-basis
The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.
.item {
flex-basis: <length> | auto; /* default auto */
}
Copy the code
It can be set to the same value as the width or height attribute (such as 350px), and the project will take up a fixed space.
Flex (recommended)
The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code
This property has two shortcut values: auto (1 1 auto) and None (0 0 auto). initial: 0 1 auto auto: 1 1 auto none: 0 0 auto
It is recommended to use this attribute in preference to writing three separate attributes, as the browser will infer related values.
Align-self Aligns its side axis
The align-self property allows a single item to have a different alignment than other items, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code
The order is in order.
The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
.item {
order: <integer>;
}
Copy the code
Adaptive exercise
[Three-column layout] Fixed left and right, adaptive in the middle
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>
div {
display: flex;
width: 80%;
height: 200px;
background-color: pink;
}
div span:first-child{
width: 150px;
background-color: skyblue;
}
div span:nth-child(2) {flex: 1;
background-color: orange;
}
div span:nth-child(3) {width: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
Copy the code
4. Actual combat – static Ctrip mobile phone home page
Today is mainly to a mobile terminal combat content is very simple, will use a lot of CSS3 knowledge, consolidate ~
The target
4.0 start
The directory structure
index.html
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>Ctrip in hand, say go</title>
</head>
<body>
<div class="search-index">
<div class="search"></div>
<a href="#" class="user"></a>
</div>
</body>
</html>
Copy the code
index.css
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: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
Copy the code
4.1 Top Search box
4.4.1 target
4.1.2 Overall layout
A box at the top, fixed position, fixed at the top, then center the two boxes in the middle, left width adaptive, fixed width on the right
<body>
<div class="search-index">
<div class="search"></div>
<a href="#" class="user"></a>
</div>
</body>
Copy the code
/* Search module */
.search-index {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: pink;
}
.search {
flex: 1;
}
.user {
width: 44px;
height: 44px;
background-color: orange;
}
Copy the code
4.1.3 Filling in the Profile Picture Area
I’m going to use a pseudo element to show the avatar, and the avatar is a Sprite, and the Sprite is a double image, and I’m going to scale the image in half, and I’m going to measure the position
<a href="#" class="user">my</a>
Copy the code
a {
text-decoration: none;
}
.user {
width: 44px;
height: 44px;
background-color: orange;
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: "";
display: block;
width: 23px;
height: 23px;
/* Use Sprite */
background: url(../images/sprite.png) no-repeat -59px -194px;
/* double graph */
background-size: 104px auto;
margin: 5px auto 0;
}
Copy the code
4.1.4 Search box Area
Change the box to a border-box box model
div {
box-sizing: border-box;
}
Copy the code
<div class="search">Search: Destinations/hotels/attractions/flight no</div>
Copy the code
Set the size of the search box and add some shadows. Center the text vertically
.search {
position: relative;
height: 26px;
/* The line height is not 26px but 24px because the CSS3 box model is used */
line-height: 24px;
border: 1px solid #ccc;
flex: 1;
font-size: 12px;
color: # 666;
margin: 7px 10px;
padding-left: 26px;
border-radius: 5px;
/* Set the shadow */
box-shadow: 0 2px 4px rgba(0.0.0.2);
}
Copy the code
Search icon like using Sprite graph, using pseudo-element inserted in front
.search::before {
content: "";
/* display: block; * /
/* Change to absolute position, do not occupy the original position, will not squeeze text down */
position: absolute;
top: 5px;
left: 5px;
width: 15px;height: 15px;
background: url(../images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
}
Copy the code
Add a background color and top and bottom borders to the entire search module
.search-index {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: #F6F6F6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
Copy the code
4.1.5 effect
4.2 Focus diagram module
2 layout
<div class="focus">
<img src="./upload/focus.jpg" alt="">
</div>
Copy the code
The top search box is a fixed position, not the original position, so use the padding to leave the top position out
/* focus */
.focus {
padding-top: 26px;
}
.focus img {
width: 100%;
}
Copy the code
4.2.2 effect
4.3 Local navigation bar
This layout
Use Flex rounded rectangle
<ul class="local-nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Copy the code
ul {
list-style: none;
margin: 0;
padding: 0;
}
.local-nav {
display: flex;
height: 64px;
background: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1
}
Copy the code
4.3.2 Filling Contents
Use Flex to center the image vertically on top of the text on bottom
<ul class="local-nav">
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>Attractions · Play</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>Attractions · Play</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>Attractions · Play</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>Attractions · Play</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>Attractions · Play</span>
</a>
</li>
</ul>
Copy the code
.local-nav a {
display: flex;
/* Change spindle from top to bottom */
flex-direction: column;
/* The side axis is centered */
align-items: center;
font-size: 12px;
}
.local-nav-icon {
width: 32px;
height: 32px;
/* Flex does not have margin merging problems */
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
Copy the code
Using CSS3’s selector, you can easily style these five navigations
<ul class="local-nav">
<li>
<a href="#" title="Attractions, Play.">
<span class="local-nav-icon1"></span>
<span>Attractions · Play</span>
</a>
</li>
<li>
<a href="#" title="Tour around">
<span class="local-nav-icon2"></span>
<span>Swim around</span>
</a>
</li>
<li>
<a href="#" title="Gourmet Grove">
<span class="local-nav-icon3"></span>
<span>meishilin</span>
</a>
</li>
<li>
<a href="#" title="Day trip">
<span class="local-nav-icon4"></span>
<span>A day trip</span>
</a>
</li>
<li>
<a href="#" title="Local Guide">
<span class="local-nav-icon5"></span>
<span>The local guide</span>
</a>
</li>
</ul>
Copy the code
.local-nav li a [class^="local-nav-icon"] {
width: 32px;
height: 32px;
background-color: orange;
/* Flex does not have margin merging problems */
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
.local-nav li a .local-nav-icon2 {
background-position: 0 -32px;
}
.local-nav li a .local-nav-icon3 {
background-position: 0 -64px;
}
.local-nav li a .local-nav-icon4 {
background-position: 0 -96px;
}
.local-nav li a .local-nav-icon5 {
background-position: 0 -128px;
}
Copy the code
4.3.3 effect
4.4 Main navigation bar
4.4.1 layout
A large rounded rectangle with three rectangles inside
<nav>
<div class="nav-common">
<div class="nav-items">1</div>
<div class="nav-items">2</div>
<div class="nav-items">3</div>
</div>
<div class="nav-common">2</div>
<div class="nav-common">3</div>
</nav>
Copy the code
The inside box uses Flex layout and the middle box sets the upper and lower margins
nav {
/* Because the div inside has no rounded corners, we need this */
overflow: hidden;
border-radius: 8px;
margin: 0 4px 3px;
}
.nav-common {
display: flex;
height: 88px;
background-color: orange;
}
.nav-common:nth-child(2) {margin: 3px 0;
}
.nav-items {
flex: 1
}
/* takes the first two elements */
.nav-items:nth-child(-n+2) {border-right: 2px solid #fff ;
}
Copy the code
4.4.2 Filling Contents
There is one label in the left box and two labels in the middle and right boxes
<nav>
<div class="nav-common">
<div class="nav-items">
<a href="#">The hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">The hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">The hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
<div class="nav-items">
<a href="#">Overseas hotel</a>
<a href="#">hotel</a>
</div>
</div>
</nav>
Copy the code
.nav-items {
flex: 1;
display: flex;
flex-direction: column;
}
.nav-items a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
font-size: 14px;
/* Text shadow */
text-shadow: 1px 1px rgba(0.0.0.0.2);
}
.nav-items a:nth-child(1) {border-bottom: 2px solid #fff;
}
/* The first column of a does not have a border */
.nav-items:nth-child(1) a {
border: 0;
background: url(../images/hotel.png) no-repeat bottom center;
background-size: 121px auto;
}
Copy the code
4.4.3 Background Color gradient
width: 600px;
height: 200px;
/* Background gradient must be prefixed with browser private */
background: -webkit-linear-gradient(red, blue);
Copy the code
background: -webkit-linear-gradient(left, red, blue);
Copy the code
background: -webkit-linear-gradient(top left, red, blue);
Copy the code
.nav-common:nth-child(1) {
background: -webkit-linear-gradient(left, #FA5A55.#FA994D);
}
.nav-common:nth-child(2) {
background: -webkit-linear-gradient(left, #4B90ED.#53BCED);
}
.nav-common:nth-child(3) {
background: -webkit-linear-gradient(left, #34C2A9.#6CD559);
}
Copy the code
4.4.4 effect
4.5 Navigation Bar
4.5.1 layout
Same thing as before, but this is multiple lines
html
<ul class="subnav-entry">
<li>
<a href="#">
<span class="subnav-entry-icon1"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon2"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon3"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon4"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon5"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon6"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon7"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon8"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon9"></span>
<span>Telephone charges</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon10"></span>
<span>Telephone charges</span>
</a>
</li>
</ul>
Copy the code
CSS Note that the Flex property is not written as 1, but as a percentage
.subnav-entry {
display: flex;
border-radius: 8px;
background-color: #fff;
margin: 0 4px;
flex-wrap: wrap;
}
.subnav-entry li {
/* I can't write 1 here, otherwise I can't go down, I can write percentage, 20 percent of the parent box */
flex: 20%;
}
.subnav-entry a {
display: flex;
flex-direction: column;
align-items: center;
}
[class^="subnav-entry-icon"] {
width: 28px;
height: 28px;
background-color: orange;
margin-top: 4px;
background: url(../images/subnav-bg.png) no-repeat;
background-size: 28px auto;
}
.subnav-entry-icon2{
background-position: 0 -28px;
}
.subnav-entry-icon3{
background-position: 0 -62px;
}
.subnav-entry-icon4{
background-position: 0 -97px;
}
.subnav-entry-icon5{
background-position: 0 -128px;
}
.subnav-entry-icon6{
background-position: 0 -160px;
}
.subnav-entry-icon7{
background-position: 0 -195px;
}
.subnav-entry-icon8{
background-position: 0 -226px;
}
.subnav-entry-icon9{
background-position: 0 -256px;
}
.subnav-entry-icon10{
background-position: 0 -284px;
}
Copy the code
4.5.2 effect
4.6 Popular activity areas
4.6.1 Popular Activities
<div class="sales-box">
<div class="sales-hd">
<h2>Popular activities</h2>
<a href="#">More and more</a>
</div>
</div>
Copy the code
Have an H2 tag, write text to help SEO, then make the text invisible and use false elements to insert images
.sales-box {
border-top: 1px solid #bbb;
background-color: #fff;
margin: 4px;
}
.sales-hd {
height: 44px;
border-bottom: 1px solid #ccc;
}
.sales-hd h2 {
position: relative;
/* Hide internal problems */
text-indent: -999px;
overflow: hidden
}
.sales-hd h2::after {
position: absolute;
top: 8px;
left: 20px;
content: ' ';
width: 79px;
height: 15px;
background: url(../images/hot.png) no-repeat 0 -20px;
background-size: 79px auto;
}
Copy the code
4.6.2 More benefits
<div class="sales-box">
<div class="sales-hd">
<h2>Popular activities</h2>
<a href="#" class="more">Get more benefits</a>
</div>
</div>
Copy the code
.more {
position: absolute;
right: 5px;
top: 0px;
background: -webkit-linear-gradient(left, #ff5066.#ff6bc6);
border-radius: 15px;
padding: 3px 20px 3px 10px;
color: #fff;
}
.more::after {
content: "";
position: absolute;
top: 7px;
right: 9px;
width: 7px;
height: 7px;
/* Draw a triangle on the right border and rotate */
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
Copy the code
4.6.3 Activity Details
<div class="sales-box">
<div class="sales-hd">
<h2>Popular activities</h2>
<a href="#" class="more">Get more benefits</a>
</div>
<div class="sales-bd">
<div class="row">
<a href="#"><img src="./upload/pic1.jpg" alt=Village Board></a>
<a href="#"><img src="./upload/pic2.jpg" alt="High Speed Rail Tour"></a>
</div>
<div class="row">
<a href="#"><img src="./upload/pic3.jpg" alt="Customized Tour"></a>
<a href="#"><img src="./upload/pic4.jpg" alt="Coupon Centre"></a>
</div>
<div class="row">
<a href="#"><img src="./upload/pic5.jpg" alt="Membership Benefits"></a>
<a href="#"><img src="./upload/pic6.jpg" alt="Youpin Mall"></a>
</div>
</div>
Copy the code
.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%;
}
Copy the code