编程知识 cdmana.com

Dry goods: CSS layout

classification

Fixed width layout : The general width is 960/1000/1024 px

Not fixed width layout : The layout is mainly based on the principle of document flow

Responsive layout :PC Top fixed width , There is no fixed width on the phone

Use scenarios of various layouts

float Layout Add... To the child element float:left and width Add... To the parent element .clearfix This layout does not need to be responsive , It's for IE To prepare for . stay IE 6/7 There are double marginbug when , Can target IE 6/7 hold margin halve . Or add display: inline-block. flex Layout Let an element become flex Containers .container{ display: flex; /or inline-flex/ } Copy code change items Direction of flow ( Spindle )

flex-direction: row From left to right

flex-direction: row-reverse From right to left

flex-direction: column From top to bottom

flex-direction: column-reverse From bottom to top

Change the line

flex-wrap: nowrap Default , Don't wrap , Automatic indentation

flex-wrap: wrap Line break , The first row is at the top

flex-wrap: wrap-reverse Line break , The first row is at the bottom

Spindle alignment There is no change flex-direction Direction , The default spindle is the horizontal axis .

justify-content: flex-start Align left

justify-content: flex-end Align right

justify-content: center In the middle

justify-content: space-between Align the two sides , The gap between projects is equal

justify-content: space-around The spaces on both sides of each item are equal , So the gap between projects will be at both ends 2 times

justify-content: space-evenly The gap between the two ends and between the items is equal

Secondary axis ( The vertical axis ) alignment

align-items: flex-start Top alignment

align-items: flex-end Bottom alignment

align-items: center In the middle

align-items: strech Default , If the item is set height or auto, Will fill the entire container

Multi line content

align-content: flex-start Start alignment

align-content: flex-end End alignment

align-content: center In the middle

align-content: stretch completely fill

align-content: space-between full-justified , The average distribution of spacing between axes

align-content: space-around The gap between the axis and the frame and between the axis and the axis is evenly distributed

order attribute order Property defines the order in which items are arranged . The smaller the numerical , Line up front , The default is 0. .item{ order: <integer>; } Copy code

flex-grow attribute flex-grow Attribute defines the magnification of the item , The default is 0

If the attributes of the items are 1 when , They're going to divide up the rest of the space , If the attribute of an item is 2, Other item attributes are 1 when , So the former takes up twice as much space as other projects . flex-shrink attribute It defines the reduction ratio of the project , The default is 1, Out of space , The project shrinks flex-basis attribute Control base width , The default value is auto, The original size of the project . flex attribute flex The attribute is flex-grow、flex-shrink and flex-basis Abbreviation , The default value is 0 1 auto. The last two properties are optional . .item{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] } Copy code This property has two shortcut values :auto(1 1 auto) and none (0 0 auto). It is recommended to use this property first , Instead of writing three separate attributes , Because the browser will calculate the relevant value . align-self attribute align-self Property allows a single item to have a different alignment than other items , covering align-items attribute . .item{ align-self: auto | flex-start | flex-end | center | baseline | stretch; } Copy code

Grid Layout Become a container .container{ display: grid | inline-grid; } Copy code Row and column .container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } Copy code

set range .item{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } Copy code

Equal parts Set a property value for each item , For example, there are three projects , Give each item a value of 1fr, That is, the space is divided into three equal parts . .container{ grid-template-columns: 1fr 1fr 1fr; Copy code Partition Name the grid area , The amount of space occupied by the corresponding project . .container{ width: 400px; height: 300px; border: 1px solid red; display: grid; grid-template-columns: 50px 50px auto 50px; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . aside" "footer footer footer footer" } .header{ grid-area: header; background: red; } .main{ grid-area: main; background: blue; } .aside{ grid-area: aside; background: yellow; } .footer{ grid-area: footer; background: grey; } Copy code

Gap gap .container{ grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } Copy code

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

Scroll to Top