编程知识 cdmana.com

Flex and grid layout of CSS

   On a daily basis , The front end often deals with layout ,position ,float, Although it has its own characteristics , But it's also easy to have problems ; Here we mainly introduce two kinds of powerful layouts flex And grid And some simple application examples ;

  1、flex Layout

   Reference here www.jianshu.com/p/4290522e1…

   Use flex The elements of the layout are called containers , Need to set up display:flex; The elements contained in the container are children of the container . Containers and children have their own style properties ; The properties of the container are used to lay out the children , The attributes of a subitem are used to lay out the contents and elements it contains ;

  1.1 Common container properties are :

  flex-direction;

  flex-wrap;

  flex-flow;

  justify-content;

  align-items;

  align-content;

   Copy code

  1.1.1 flex-direction attribute

   This attribute is mainly used to control the arrangement direction of subitems , Attribute value has :row |row-reverse|column|column-reverse

  row: The subitems are arranged horizontally , From left to right ;

  row-reverse: The subitems are arranged horizontally , From right to left ;

  column: The subitems are arranged vertically , From top to bottom ;

  column-reverse: The subitems are arranged vertically , From bottom to top ;

  1.1.2 flex-wrap attribute

   This property is mainly used to control the line feed of the sub item arrangement ; Attribute value has :nowrap|wrap|wrap-reverse

  nowrap: Don't wrap ;

  wrap: Line break ;

  wrap-reverse: Line break , But the first line will be below ;

  1.1.3 flex-flow attribute

   The attribute is actually flex-direction And flex-wrap An abbreviated set of two attributes , Use as :

  flex-flow: row nowrap;

  1.1.4 justify-content attribute

   This attribute is a common attribute , Control the subitem in flex-direction Alignment of attributes in the direction they are aligned ; Attribute value has :

  flex-start | flex-end | center | space-between | space-around

  flex-start: Align from the start of the spindle ;

  flex-end: Align from the end of the spindle ;

  center: Center it along the main axis

  space-between: full-justified , The interval between subitems is the same ;

  space-around: The two ends of subitems are equally spaced ;

  1.1.5 align-items attribute

   This attribute defines how it is aligned on the cross axis ( Relative to flex-direction The cross axis of the spindle ); Property value Yes :flex-start | flex-end | center | baseline | stretch |

  flex-start: The starting end of the cross axis is aligned ;

  flex-end: The ends of the cross axis are aligned ;

  center: Center alignment of cross axes ;

  baseline: The first line of text of the subitem is baseline aligned ;

  stretch: Subitems have no height or auto, Using this property will take up the height of the container ;

  1.1.6 align-content attribute

   This attribute defines the alignment of multiple axes , Alignment can be understood as multiple line alignment , A line of subitems uses this Attribute has no effect ;

   Attribute value has : flex-start | flex-end | center | space-between | space-around | stretch

  flex-start: Align with the starting point of the intersecting axis ;

  flex-end: Align with the end of the cross axis ;

  center: Align with the midpoint of the intersecting axis ;

  space-between: Align with both ends of the cross axis , The average distribution of spacing between axes ;

  space-around: The spacing between each axis is equal . therefore , The distance between the axes is less than that between the axes and the frame Double the interval ;

  stretch( The default value is ): The axis occupies the entire cross axis ;

  1.2 Common subitem properties are :

  order;

  flex-grow;

  flex-shrink;

  flex-basis;

  flex;

  align-self;

   Copy code

  1.2.1 order attribute

   Defines the order in which the attributes are arranged , The smaller the number is. , The more we line up , Not commonly used , The default value is 0;

  1.2.2 flex-grow attribute

   The default value of this property is 0, It mainly defines the proportion of the width or height of the subitems in a row or column , If the subitems in a row This property has the same value , The proportion is the same ; If the larger the value, the greater the percentage ; In proportion to 2 It's the ratio 1 Double of ; If it Its children do not have this property set , There is only one subitem set , Then the subitem will occupy the remaining space ;

  1.2.3 flex-shrink attribute

   This attribute defines the scaling of the subitem ; The default value is 1, When there is not enough space, the small items will be reduced ; If you set the subkey's flex-shrink The property value is 0 when , When there is not enough space , Other children zoom , This subitem does not scale ;( Use this property It can solve the problem of line feed alignment )

  1.2.4 flex-basis attribute

   This attribute is not commonly used , It defines before allocating extra space , Spindle space occupied by the project (main size). Liu According to this property , Calculate if the spindle has extra space . Its default value is auto, The original size of the project ;

  1.2.5 flex attribute

   The attribute is flex-grow, flex-shrink and flex-basis A combination of three attributes ,

   The default value is flex: 0 1 auto;

  1.2.6 align-self attribute

   This attribute , Allows children to be detached from the container align-items attribute , And then it has its own alignment , The default value is auto;

   Attribute value has :auto |flex-start | flex-end |center | baseline | stretch

   Property value and align-items The same function ;

  1.3 Related examples and knowledge points

  1.3.1 flex Relevant examples

   Here are some examples of mobile terminals ,PC The end is similar to ;

  1、 The common layout is the center ; The code is as follows :

  .container{

  display:flex;

  flex-direction:row;

  justify-content:center;

  align-items:center;

  }

   Copy code

  2、 Text alignment , Can change lines

  

   Mission location

  ******* place

  .w-style {

  display: flex;

  flex-direction: row;

  font-size: 12px;

  font-family: PingFangSC, PingFangSC-Regular;

  font-weight: 400;

  text-align: left;

  color: rgba(20, 40, 65, 0.5);

  .time-style {

  color: #142841;

  }

  .right-margin {

  margin-right: 15px;

  width: 48px;

  flex-shrink: 0;

  }

  }

   Copy code

  3、 have access to flex Layout , Design the side style as follows :

  

  " alt="" width="28" height="30" align="">

   The code is as follows :

  2020.08.18 19:17 CHEN Si

   Task details

  .content-box { margin: 0 15px; display: flex; flex-direction: row; .box-left { display: flex; margin-right: 10px; flex-direction: column; transform: translateY(10px); .dot { width: 10px; height: 10px; border-radius: 5px; background-color: rgba(20, 40, 65, 0.3); } .line { margin-left: 4px; width: 1px; flex: 1; background: rgba(20, 40, 65, 0.3); } } .box-right { flex: 1; p { margin-top: 5px; span:first-child { color: rgba(20, 40, 65, 0.6); } span:last-child { margin-left: 10px; color: brown; } } .task-detail { margin: 15px; .task-tip { color: rgba(20, 40, 65, 0.6); } .task-content { margin-top: 10px; background: rgba(20, 40, 65, 0.1); width: 100%; height: 160px; } } }}

   Copy code

  4、 The holy grail layout ;

  1.3.2: At the same time , You can still use display:flex, Lay out your own internal elements ;

   Form nested independent modules ;

   Summary : We can also see that flex Layout , Often deal with some one-dimensional layout , use flex Nesting can handle some two dimensions Layout , For example, the Grail layout above , But there's a better layout for binary layout , That's it grid Layout ;

  2、Grid Layout :

  grid The grid layout is realized , You can control rows and columns at the same time ; Please refer to this good article for details juejin.im/post/685457… ;grid Layouts also have container properties and child properties ; Here is a brief summary :

  2.1 Container attribute

  grid-template-columns;

  grid-template-rows;grid-auto-columns;

  grid-auto-rows;

  grid-row-gap;

  grid-column-gap;

  grid-gap;

  grid-template-areas;

  grid-auto-flow;

  justify-items;

  align-items;

  justify-content;

  align-content;

  place-content;

   Copy code

  2.1.1 grid-template-columns and grid-template-rows attribute :

  grid-template-columns : Control column ( Explicit ) Width ;

  grid-template-rows : Control line ( Explicit ) Height ;

  .contaainer {

  grid-template-columns: 200px 200px 200px; / Each column has the same width , Simple writing repeat(3,200px)/

  grid-template-rows: 100px 200px;

  grid-gap:20px; / Here's how /

  }

   Copy code

  

  " alt="" width="28" height="30" align="">

   It can be seen that , The picture above shows 2 That's ok 3 Column , The width of each category is 200px, The height of the first line is 100, The height of the second line is 200px;

  2.1.2 grid-auto-columns and grid-auto-rows attribute :

  grid-auto-columns : control ( Implicit ) Column width ;

  grid-auto-rows : control ( Implicit ) Row height ;

   Explicit and implicit are relative , If :grid-template-columns and grid-template-rows attribute : If the size of the corresponding row and column is set, it is displayed , If you exceed the corresponding row and column, you need to use grid-auto- columns and grid-auto-rows Property to set the corresponding column width and row height , Then it is implicit ;

  grid-template-columns and grid-template-rows Properties and grid-auto-columns and grid- auto-rows attribute , In some cases, you can mix them up , such as :

  1、3 More than one line , Then the line height is 200px The column width is 200px;

  grid-template-columns:repeaat(3,200px);

  grid-auto-flow: row;/* Control layout direction */

  grid-auto-rows:200px;

   Copy code

  2、3 Rows and columns ,

  grid-template-rows:repeaat(3,200px);

  grid-auto-flow:column;/* Control layout direction */

  grid-auto-columns:200px;

   Copy code

  2.1.3 grid-row-gap and grid-column-gap and grid-gap attribute :

   These three properties are often used to control the spacing of subitems , seeing the name of a thing one thinks of its function :

  grid-row-gap: Control the spacing between rows ;

  grid-column-gap: Control the spacing between columns ;

  grid-gap: It's a short form of the first two , The new version discards the above attributes , use gap attribute ;

  2.1.4 justify-items attribute 、align-items Properties and place-items attribute

   These three attributes , Control the alignment of the content in the subitem separately :

  justify-items Control the horizontal position : Left 、 in 、 Right 、 Stretching takes up the children ;

  align-items Control the vertical position : On 、 in 、 Next 、 Stretching takes up the children

  place-items Is the abbreviation of the above two properties , The order is align-items、justify-items. If only set A value , Then the two properties are set to the same value ;

  .container {

  justify-items: start | end | center | stretch;

  align-items: start | end | center | stretch;

  place-items: align-items Property value justify-items Property value ;

  }

   Copy code

  2.1.5 justify-content attribute 、align-content Properties and place-content attribute

   These three attributes are related to flex The container properties of are similar to , It's just that it's multi row and multi column ;

  justify-content : The horizontal position of the entire content area inside the container ( Left middle right );

  align-content: The vertical position of the entire content area ( 3 );

  place-content: Is a short form of the above two properties , In sequence :align-content、 justify-content;

  .container {

  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

  align-content: start | end | center | stretch | space-around | space-between | space-evenly;

  }

   Copy code

  space-around - The spaces on both sides of each subitem are equal . therefore , The spacing between subitems is greater than that between subitems and container borders Double the interval

  space-between - The interval between subitems and subitems is equal , There is no space between the child and the container border

  space-evenly - The interval between subitems and subitems is equal , The same length of space between the child and the container border

  stretch - When the child size is not specified , Stretching takes up the whole container

  2.1.6 grid-template-areas attribute

   Of the attribute and the subitem grid-area Attributes are used together , Used to divide a certain layout area , Use... In subitems grid-area Name the children , Use... In containers grid-template-areas attribute , Divide the area ;

  .container {

  display: grid;

  grid-gap: 10px;

  grid-template-columns: 120px 120px 120px;

  grid-template-areas:

  ". header header"

  "sidebar content content";

  background-color: #fff;

  color: #444;

  }

  .sidebar {

  grid-area: sidebar;

  }

  .content {

  grid-area: content;

  }

  .header {

  grid-area: header;

  }

   Copy code

   Above code , There are three named children , In the container , Use grid-template-areas attribute , Divided into 6 Regions ,"." Represents an empty area , Merge into a large area of the same name , Here's the picture :

  

  2.2 Child properties

  grid-column-start;

  grid-column-end;

  grid-row-start;

  grid-row-end;

  grid-area;

  justify-self;

  align-self;

  place-self;

   Copy code

  2.2.1 grid-column-start attribute 、grid-column-end attribute 、grid-row-start Properties and

  grid-row-end attribute

  grid According to the setting of rows and columns, the grid area is divided , The region contains subitems , The above four attributes , Actually It is to use grid lines to locate the region position of subitems ;

  grid-column-start attribute : The vertical grid line where the left border is

  grid-column-end attribute : The vertical grid line where the right border is located

  grid-row-start attribute : The horizontal grid line where the top border is located

  grid-row-end attribute : The horizontal grid line where the lower border is located

  .wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

  grid-auto-rows: minmax(100px, auto);

  }

  .one {

  grid-column-start: 1;

  grid-column-end: 2;

  background: #19CAAD;

  }

  .two {

  grid-column-start: 2;

  grid-column-end: 4;

  grid-row-start: 1;

  grid-row-end: 2;

  /* If there is overlap , Just use z-index */

  z-index: 1;

  background: #8CC7B5;

  }

  .three {

  grid-column-start: 3;

  grid-column-end: 4;

  grid-row-start: 1;

  grid-row-end: 4;

  background: #D1BA74;

  }

  .four {

  grid-column-start: 1;

  grid-column-end: 2;

  grid-row-start: 2;

  grid-row-end: 5;

  background: #BEE7E9;

  }

  .five {

  grid-column-start: 2;

  grid-column-end: 2;

  grid-row-start: 2;

  grid-row-end: 5;

  background: #E6CEAC;

  }

  .six {

  grid-column: 3;

  grid-row: 4;

  background: #ECAD9E;

  }

   Copy code

  

  2.2.2 grid-area attribute

   It can be understood as the use of , Name the subitem ; Often with grid-template-areas Attributes are used together ;

  2.2.3 justify-self attribute 、align-self Properties and place-self attribute

  justify-self Property to set the horizontal position of the child content ( Left middle right ), Follow justify-items The usage of the attribute is finished Exactly the same , But only works on a single subitem

  align-self Property to set the vertical position of the child content ( 3 ), Follow align-items The use of attributes is completely Agreement , It only works on a single subitem

  place-self It's settings align-self and justify-self Short form of

  justify-self: start | end | center | stretch;

  align-self: start | end | center | stretch;

   Copy code

  2.3 Use cases

  .sport-box { padding: 15px 13px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; grid-auto-rows: 100px; gap: 10px; .sport-item { border-radius: 6px; box-shadow: 0px 2px 4px 0px rgba(0, 145, 250, 0.35); text-align: center; img { margin: 11px auto 0px; } }}

   Copy code

版权声明
本文为[osc_60387719]所创,转载请带上原文链接,感谢

Scroll to Top