資訊專(zhuān)欄INFORMATION COLUMN
摘要：圣杯布局圣杯布局指的是一種最常見(jiàn)的網(wǎng)站布局。代碼如下代碼如下這里主要使用到了使得子元素水平排列，并且換行總結(jié)這是我簡(jiǎn)單總結(jié)的一些布局。
如果對(duì)flex不是很熟悉的同學(xué)，可以看一下我的另一篇文章Flex 布局1、網(wǎng)格布局 1.1、基本網(wǎng)格布局
最簡(jiǎn)單的網(wǎng)格布局，就是平均分布。
HTML代碼如下。
1/21/21/31/31/3
CSS代碼如下。
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
background: #eee;
margin: 10px;
}
這里最關(guān)鍵的就是flex:1使得各個(gè)子元素可以等比伸縮
某個(gè)網(wǎng)格的寬度為固定的百分比，其余網(wǎng)格平均分配剩余的空間。
HTML代碼如下。
50%autoautoauto50%1/3
CSS代碼如下。
.col2 {
flex: 0 0 50%;
}
.col3 {
flex: 0 0 33.3%;
}
這里最關(guān)鍵的是通過(guò)flex的第三個(gè)屬性，也就是flex-basis來(lái)定義元素占據(jù)的空間。
圣杯布局（Holy Grail Layout：）指的是一種最常見(jiàn)的網(wǎng)站布局。頁(yè)面從上到下，分成三個(gè)部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導(dǎo)航、主欄、副欄。
HTML代碼如下。
header content
CSS代碼如下。
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
display: flex;
flex: 1;
}
header,
footer {
flex: 0 0 100px;
}
.content {
flex: 1;
}
.ads,
.nav {
flex: 0 0 100px;
}
.nav {
order: -1;
}
.bg {
background: #eee;
margin: 10px;
}
@media (max-width: 768px) {
.body {
flex-direction: column;
flex: 1;
}
.nav,
.ads,
.content {
flex: auto;
}
}
這里面需要注意的點(diǎn)有
container的flex-direction: column這樣保證了header,body,footer是在垂直軸上排列
header,footer的高度可以通過(guò)flex: 0 0 100px來(lái)控制
nav可以通過(guò)order:-1來(lái)調(diào)整位置
通過(guò)@media (max-width: 768px)來(lái)調(diào)整小屏幕的頁(yè)面結(jié)構(gòu)
3、側(cè)邊固定寬度側(cè)邊固定寬度，右邊自適應(yīng)
html代碼如下。
asideheadercontent
CSS代碼如下。
.bg {
background: #eee;
margin: 10px;
}
.container1 {
min-height: 100vh;
display: flex;
}
.aside1 {
/* flex: 0 0 200px; */
flex: 0 0 20%;
}
.body1 {
display: flex;
flex-direction: column;
flex: 1;
}
.content1 {
flex: 1;
}
.header1, .footer1 {
flex: 0 0 10%;
}
這個(gè)和上面的基本差不多就不做解釋了。
每行的項(xiàng)目數(shù)固定，會(huì)自動(dòng)分行。
html代碼如下
css代碼如下
.container2 {
width: 200px;
height: 150px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
.item {
box-sizing: border-box;
background: #eee;
flex: 0 0 20%;
height: 40px;
margin: 5px;
}
這里主要使用到了flex-flow: row wrap使得子元素水平排列，并且換行
這是我簡(jiǎn)單總結(jié)的一些布局。如有錯(cuò)誤，歡迎指正。更多系列文章
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116023.html
摘要：中的有些元素也是這樣，他們有的只對(duì)牛奶感興趣，有的只喜歡吃堅(jiān)果和果凍，而討厭牛奶。我稱(chēng)之為果凍依賴(lài)型元素，又稱(chēng)之為依賴(lài)型元素，也就是說(shuō)只有一個(gè)元素屬于或是也可以理解為水平水平，其身上的屬性才會(huì)起作用。 單列布局 水平居中 水平居中的頁(yè)面布局中最為常見(jiàn)的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實(shí)現(xiàn)水平居中的方法（注：下面各個(gè)實(shí)例中實(shí)現(xiàn)的是child元素的對(duì)齊操作，...
摘要：中的有些元素也是這樣，他們有的只對(duì)牛奶感興趣，有的只喜歡吃堅(jiān)果和果凍，而討厭牛奶。我稱(chēng)之為果凍依賴(lài)型元素，又稱(chēng)之為依賴(lài)型元素，也就是說(shuō)只有一個(gè)元素屬于或是也可以理解為水平水平，其身上的屬性才會(huì)起作用。 單列布局 水平居中 水平居中的頁(yè)面布局中最為常見(jiàn)的一種布局形式，多出現(xiàn)于標(biāo)題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實(shí)現(xiàn)水平居中的方法（注：下面各個(gè)實(shí)例中實(shí)現(xiàn)的是child元素的對(duì)齊操作，...
摘要：布局是年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。實(shí)踐用來(lái)實(shí)現(xiàn)圣杯布局圣杯布局指的是一種最常見(jiàn)的網(wǎng)站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應(yīng)。 Flex 布局是 W3C 2009年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。Flex 布局使用起來(lái)是非常簡(jiǎn)單的，本文談一談平時(shí)使用可能需要注意的問(wèn)題。 align-content 平時(shí)使用 ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
閱讀 3649·2021-09-22 15:15
閱讀 3555·2021-08-12 13:24
閱讀 1309·2019-08-30 15:53
閱讀 1816·2019-08-30 15:43
閱讀 1178·2019-08-29 17:04
閱讀 2792·2019-08-29 15:08
閱讀 1573·2019-08-29 13:13
閱讀 3084·2019-08-29 11:06
