018day（多列，弹性盒双飞翼+圣杯布局，美团移动端制作）_弹性盒子布局制作外卖点餐页面-CSDN博客

本文链接：https://blog.csdn.net/w296932099/article/details/119360529

一、多列

1、column-count：分栏的个数

2、column-width：分栏的宽度

3、column-gap：分栏的间距

4、column-rule：分栏的边框

5、column-span：all/none 设置或检索对象元素是否横跨所有列。

6、column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持）

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一(默认值)

7、columns设置或检索对象的列数和每列的宽度。复合属性 columns:300px 3;

<' column-width '> || <' column-count '>

8、break-inside:avoid避免中断

描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。

二、多列属性解释

1、column-count

说明：

属性规定元素应该被分隔的列数

适用于：除table外的非替换块级元素, table-cells, inline-block元素

2、column-gap

说明：

属性规定列之间的间隔大小

3、column-rule

说明：

设置或检索对象的列与列之间的边框。复合属性。

column-rule-color规定列之间规则的颜色。

column-rule-style规定列之间规则的样式。

column-rule-width规定列之间规则的宽度。

4、column-fill

说明：

设置或检索对象所有列的高度是否统一

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一(默认值)

5、column-span

说明：

设置或检索对象元素是否横跨所有列。

none：不跨列

all：横跨所有列

6、column-width

说明：

设置或检索对象每列的宽度

7、columns

说明：

设置或检索对象的列数和每列的宽度。复合属性

<' column-width '> || <' column-count '>

例：columns:100px 3;

注释：

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

8、break-inside:avoid避免中断

描述了在多列布局页面下的内容盒子如何中断，写给多列容器里的中断元素。

附注1、弹性盒双飞翼+圣杯布局

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0;

margin: 0;

}

section{

width: 100%;

border: 1px solid red;

display: flex;

}

div:nth-child(1){

width: 700px;

height: 300px;

background-color: yellow;

flex-grow: 1;

}

div:nth-child(2){

width: 300px;

height: 300px;

background-color: yellowgreen;

flex-grow: 1;

}

div:nth-child(3){

width: 300px;

height: 300px;

background-color: pink;

flex-grow: 1;

}

@media screen and (max-width:800px) {

section{

flex-wrap: wrap;

justify-content: space-around;

}

div:nth-child(2),div:nth-child(3){

flex-grow: 0;

}

</style>

</head>

<body>

</section>

</body>

</html>

附注2、美团移动端

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;padding: 0;

}

form{

width: 100%;

height:40px;

background-color: #FFBE00;

display: flex;

}

label,button{

width: 40px;

height: 40px;

line-height: 40px;

}

input{

flex-grow: 1;

height: 32px;

border: none;

align-self: center;

border-radius: 20px 0 0 20px ;

}

button{

border: none;

background-color: #ffbe00;

}

section{

width: 100%;

height: 170px;

display: flex;

border: 1px solid red;

flex-direction: column;

justify-content: space-around;

}

header,footer{

width: 100%;

height: 70px;

/* border: 1px solid black; */

display: flex;

justify-content: space-around;

}

div{

/* background-color: aqua; */

display: flex;

flex-direction: column;

justify-content: space-around;

width: 60px;

}

img{

width: 43px;

align-self: center;

display: flex;

}

font-size: 11px;

align-self: center;

}

aside{

width: 100%;

height:1130px;

border: 1px solid red;

display: flex;

flex-direction: column;

}

/* dingwie */

.aside_div{

width: 100%;

height: 100px;

border-top:1px solid gray ;

/* background-color: pink; */

display: flex;

flex-direction: row;

align-items: center;

justify-content: flex-start;

position: relative;

}

.aside_div .sold{

position: absolute;

bottom: 14px;

right: 10px;

color: gray;

font-style: normal;

}

.aside_div img{

width: 80px;

}

.aside_div_p{

flex-direction: column;

display: flex;

/* background-color: pink; */

margin-left: 15px;

}

.aside_div .span3 i:nth-child(1){

color: indianred;

font-size:20px ;

font-style: normal;

}

.aside_div .span3 i:nth-child(2){

font-style: normal;

}

.aside_div_p .span2{

color: gray;

font-size: 13px;

}

</style>

</head>

<body>

</form>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</header>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</footer>

</section>

<aside>