弹性布局
除了Grid布局外，Flex也很擅长这件事:
<!DOCTYPE html>
@H__23@<html lang@H__23@=@H__23@"en@H__23@"@H__23@>
@H__23@<head@H__23@>
@H__23@< charset@H__23@=@H__23@"UTF-8@H__23@"@H__23@>
@H__23@< name@H__23@=@H__23@"viewport@H__23@" content@H__23@=@H__23@"width=device-width, initial-scale=1.0@H__23@"@H__23@>
@H__23@<title@H__23@>Document@H__23@</title@H__23@>
<!-- 用link引入渐变色 -->
@H__23@<link rel@H__23@=@H__23@"stylesheet@H__23@" href@H__23@=@H__23@"https://cdn.jsdelivr.net/npm/chinese-gradient@H__23@"@H__23@>
@H__23@<style@H__23@>
/* 清除认样式 */
* @H__23@{ padding@H__23@: @H__23@; margin@H__23@: @H__23@}
li @H__23@{ list-style@H__23@: none @H__23@}
/* 父元素 */
ul @H__23@{
/* 为flex布局 */
display@H__23@: flex@H__23@;
/* 允许换行 */
flex-flow@H__23@: wrap@H__23@;
@H__23@}
/* 子元素 */
li @H__23@{
/* 2px的外边距 */
margin@H__23@: px@H__23@;
/* 墨色渐变 */
background@H__23@: var@H__23@(--墨色@H__23@)@H__23@;
/* 100px的高度 */
height@H__23@: px@H__23@;
/* 令其可伸展 */
flex@H__23@: @H__23@;
/* 100px的宽 */
flex-basis@H__23@: px
@H__23@}
@H__23@</style@H__23@>
@H__23@</head@H__23@>
@H__23@<body@H__23@>
@H__23@<ul@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@</ul@H__23@>
@H__23@</body@H__23@>
@H__23@</html@H__23@>
运行结果：
<!DOCTYPE html>
@H__23@<html lang@H__23@=@H__23@"en@H__23@"@H__23@>
@H__23@<head@H__23@>
@H__23@< charset@H__23@=@H__23@"UTF-8@H__23@"@H__23@>
@H__23@< name@H__23@=@H__23@"viewport@H__23@" content@H__23@=@H__23@"width=device-width, initial-scale=1.0@H__23@"@H__23@>
@H__23@<title@H__23@>Document@H__23@</title@H__23@>
<!-- 用link引入渐变色 -->
@H__23@<link rel@H__23@=@H__23@"stylesheet@H__23@" href@H__23@=@H__23@"https://cdn.jsdelivr.net/npm/chinese-gradient@H__23@"@H__23@>
@H__23@<style@H__23@>
/* 清除认样式 */
* @H__23@{ padding@H__23@: @H__23@; margin@H__23@: @H__23@}
li @H__23@{ list-style@H__23@: none @H__23@}
/* 父元素 */
ul @H__23@{
/* 为flex布局 */
display@H__23@: flex@H__23@;
/* 允许换行 */
flex-flow@H__23@: wrap@H__23@;
@H__23@}
/* 子元素 */
li @H__23@{
/* 2px的外边距 */
margin@H__23@: px@H__23@;
/* 墨色渐变 */
background@H__23@: var@H__23@(--墨色@H__23@)@H__23@;
/* 100px的高度 */
height@H__23@: px@H__23@;
/* 100px的宽 */
flex-basis@H__23@: px@H__23@;
/* 令其可伸展 */
flex@H__23@:
@H__23@}
@H__23@</style@H__23@>
@H__23@</head@H__23@>
@H__23@<body@H__23@>
@H__23@<ul@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@<li@H__23@>@H__23@</li@H__23@>
@H__23@</ul@H__23@>
@H__23@</body@H__23@>
@H__23@</html@H__23@>
运行结果：
flex也可以实现响应式，但又与grid实现的有所不同。
这两种都较为常用，大家可以根据自己的项目需求灵活选择不同的方式去实现。
602392714
清零编程群