Flex layout

Recently, I encountered a problem in the development process Flex Problems caused by layout , So when recording this problem , By the way, I'll study systematically Flex Knowledge points of layout , And in the follow-up development will also encounter related Flex The layout problem is added later .

PS： If you are familiar with Flex Knowledge points of , You can directly click “ those Flex The pit of layout ” Jump directly to the relevant position .

Flex Knowledge point

Flex The layout is elastic , It is divided into external container and internal item, By on the outer container display: flex Attribute can realize elastic layout .

Flex The principle of layout ： By setting... To the parent element display：flex attribute , To control the position and arrangement of sub elements .

flex Introduction to layout

flex The influence of layout on other style attributes

When the parent element is set to flex After the layout , The child element float、clear、vertical-aligin Properties will be invalidated

flex Properties related to the external container of the layout

flex-direction Set up flex The main axis direction of the layout

 （copy A picture in the rookie tutorial ）

flex The layout is divided into spindles （main axis） And side shaft （cross axis）, The default horizontal direction is the spindle direction .

flex-direction: row; Default direction , The principal axis is horizontal , The starting point is on the left .

flex-direction: row-reverse; The principal axis is horizontal , The starting point is on the right .

flex-direction: column; The principal axis is perpendicular , The starting point is at the top .

flex-direction: column-reverse; The principal axis is perpendicular , Starting edge .

<template>
  <div class="flex-wrap">
    <div class="container-1 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-2 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-3 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-4 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container-5 container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.flex-wrap {
  width: 500px;
  height: 500px;
  border: 1px solid gainsboro;
}
.container {
  margin: 2px;
  border: 1px solid blue;
  display: flex;
}
.container-1 {
  /*  Default direction  */
}
.container-2 {
  flex-direction: row;
}
.container-3 {
  flex-direction: row-reverse;
}
.container-4 {
  flex-direction: column;
}
.container-5 {
  flex-direction: column-reverse;
}
.item {
  margin: 5px;
  border: 1px solid gray;
  width: 20px;
  height: 20px;
}
</style>

  design sketch ：

flex-wrap control item Line break

 flex-wrap: nowrap; Don't wrap , It's also the default value

 flex-wrap: wrap; Line break , Wrap from top to bottom , That is, the first line is at the top

flex-wrap: wrap-reverse; Line break , Wrap from bottom to top , The first line is at the bottom

    <div class="container-6 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 class="item">6</div>
    </div>
    <div class="container-7 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 class="item">6</div>
    </div>
    <div class="container-8 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 class="item">6</div>
    </div>
    <div class="container-9 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 class="item">6</div>

.container-6 {
  /*  Default  */
}
.container-7 {
  flex-wrap: nowrap;
}
.container-8 {
  flex-wrap: wrap;
}
.container-9 {
  flex-wrap: wrap-reverse;
}

 flex-flow Combination attribute

flex-flow The attribute is flex-direction and flex-wrap The combination of attributes

flex-flow: <flex-direction> <flex-wrap>;

justify-content Set the alignment of the spindle direction

 flex-start（ The default value is ）： Align left

flex-end： Right alignment

center： In the middle

space-between： full-justified , The intervals between the items are all equal .

space-around： Spread alignment , The spacing between each item is equal . therefore , The spacing between items is twice as large as the spacing between items and the border .

justify-content: space-evenly; Average distribution , The blank space is evenly distributed

.container-1 {
  /*  Default alignment  */
}
.container-2 {
  justify-content: flex-start;
}
.container-3 {
  justify-content: flex-end;
}
.container-4 {
  justify-content: center;
}
.container-5 {
  justify-content: space-between;
}
.container-6 {
  justify-content: space-around;
}

.container-7 {
  justify-content: space-evenly;
}

 ps： The example only describes the case where the horizontal direction is the spindle .

align-items Set the alignment of the side axis

 flex-start： Start alignment of side axis .

flex-end： Align the end of the side axis .

center： Align the midpoint of the side axis .

baseline: Baseline alignment of the first line of text for the project .

stretch（ The default value is ） stretch ： If the project is not set to height or set to auto, Will fill the entire container . 

    <div class="container-10 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-11 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-12 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-13 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-14 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>
    <div class="container-15 container2">
      <div class="item">
        <div class="item-1">1</div>
      </div>
      <div class="item">
        <div class="item-2">1</div>
      </div>
      <div class="item">
        <div class="item-3">1</div>
      </div>
    </div>


.container-10 {
  /*  The default value is  */
}
.container-11 {
  align-items: flex-start;
}
.container-12 {
  align-items: flex-end;
}
.container-13 {
  align-items: center;
}
.container-14 {
  align-items: baseline;
}
.container-15 {
  align-items: stretch;
}
.container2 {
  height: 100px;
  margin: 2px;
  border: 1px solid blue;
  display: flex;
}
.item-1 {
  height: 30px;
}
.item-2 {
  height: 50px;
}
.item-3 {
  height: 30px;
}

 ps： The example only describes the case where the horizontal direction is the spindle . 

flex Inside the layout item Related properties

those Flex The pit of layout

flex:1 invalid

describe ： When the child element setting exceeds no newline , If the width of the child element is greater than that of the parent element ,flex:1 invalid

<template>
  <div class="flex-wrap">
    <div class="item-wrap1">
      <p class="p-wrap">
         Elastic layout elastic layout elastic layout elastic layout elastic layout elastic layout elastic layout elastic layout elastic layout elastic layout 
      </p>
    </div>
    <div class="item-wrap2">
      <p class="p-wrap"> Subelement subelement subelement subelement subelement </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexeDemo",
};
</script>
<style scoped>
.flex-wrap {
  width: 500px;
  border: 1px solid red;
  display: flex;
}
.item-wrap1 {
  flex: 1;
  background-color: aqua;
}
.item-wrap2 {
  flex: 1;
  background-color: blueviolet;
}
.p-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

resolvent ：

  Add... To the child element width:0 Properties of

.item-wrap1 {
  flex: 1;
  width: 0;
  background-color: aqua;
}
.item-wrap2 {
  flex: 1;
  width: 0;
  background-color: blueviolet;
}

ps: How the spindle is vertical , You need to set height.