CSS Grid和Flex布局 |

1月 20, 2022 | Nix.Huang

flex layout demo

div1

div2
javacoder.cn

div3

grid layout demo

div1

div2

div3

div4

div5

div6

.flex-demo {
	display : flex;
	/*row-reverse column column-reverse*/
	flex-direction: row-reverse ;
	/*flex-end center space-around space-between space-evenly*/
	justify-content: space-evenly;
	/*stretch flex-start flex-end center*/
	align-items: stretch;
	/*combine flex-direction and flex-wrap*/
	flex-flow: row  wrap ;
}
.flex-demo div{
    /*flex-grow, flex-shrink  flex-basic*/
	flex:1,1 auto
}


.grid-demo {
  display: grid;
  /*显示定义track*/
  grid-template-columns: repeat(3, 1fr);
  /*隐式定义track*/
  grid-auto-rows: 100px;
}

.grid-demo div:nth-child(1) {grid-column:1/3}
.grid-demo div:nth-child(6) {grid-column:1/4}

.flex-demo div , .grid-demo div {border:1px solid #ff0000;}

.flex-demo {

display : flex;

/*row-reverse column column-reverse*/

flex-direction: row-reverse ;

/*flex-end center space-around space-between space-evenly*/

justify-content: space-evenly;

/*stretch flex-start flex-end center*/

align-items: stretch;

/*combine flex-direction and flex-wrap*/

flex-flow: row wrap ;

}

.flex-demo div{

/*flex-grow, flex-shrink flex-basic*/

flex:1,1 auto

}

.grid-demo {

display: grid;

/*显示定义track*/

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

/*隐式定义track*/

grid-auto-rows: 100px;

}

.grid-demo div:nth-child(1) {grid-column:1/3}

.grid-demo div:nth-child(6) {grid-column:1/4}

.flex-demo div , .grid-demo div {border:1px solid #ff0000;}

<div class='flex-demo'>
	<div>div1</div>
	<div>div2<br/>javacoder.cn</div>
	<div>div3</div>
</div>

<div style='height:20px'></div>

<div class='grid-demo'>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<div>div4</div>
	<div>div5</div>
	<div>div6</div>
</div>

<div>div2<br/>javacoder.cn</div>

</div>

</div>

Posted in: WEB开发

知行合一，止于至善

CSS Grid和Flex布局

站内搜索