前端- css layout

发表于 2021-01-01 分类于前端

前端- css layout

Before the Flexbox Layout module, there were four layout modes:

Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element

Flexbox

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

** display: flex;**

flex direction

defines in which direction the container wants to stack the flex items.

column - from top to bottom

row - from left to right

flex wrap

The flex-wrap property specifies whether the flex items should wrap or not.

order

The order property specifies the order of the flex items.

flex grow 、 shrink

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</di

flex basis

TThe order property specifies the order of the flex items.

flex

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

grid

display: grid;

 <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

grid-template-rows

The grid-template-rows property defines the height of each row.

grid-column

The grid-column property defines on which column(s) to place an item.

.item1 {
  grid-column: 1 / 5;
}

Make "item1" start on column 1 and end before column 5:

grid-row

The grid-row property defines on which row to place an item.

.item1 {
  grid-row: 1 / 4;
}

Make "item1" start on row-line 1 and end on row-line 4

grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

Getting Started With CSS Layout https://www.smashingmagazine.com/2018/05/guide-css-layout/

Grid Vs Flexbox: Which Should You Choose? https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_grid.asp