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

4.6.4 effect