資訊專欄INFORMATION COLUMN
摘要：圣杯布局圣杯布局指的是一種最常見的網(wǎng)站布局。代碼如下代碼如下這里主要使用到了使得子元素水平排列，并且換行總結(jié)這是我簡單總結(jié)的一些布局。
如果對flex不是很熟悉的同學，可以看一下我的另一篇文章Flex 布局1、網(wǎng)格布局 1.1、基本網(wǎng)格布局
最簡單的網(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使得各個子元素可以等比伸縮
某個網(wǎng)格的寬度為固定的百分比，其余網(wǎng)格平均分配剩余的空間。
HTML代碼如下。
50%autoautoauto50%1/3
CSS代碼如下。
.col2 {
flex: 0 0 50%;
}
.col3 {
flex: 0 0 33.3%;
}
這里最關(guān)鍵的是通過flex的第三個屬性，也就是flex-basis來定義元素占據(jù)的空間。
圣杯布局（Holy Grail Layout：）指的是一種最常見的網(wǎng)站布局。頁面從上到下，分成三個部分：頭部（header），軀干（body），尾部（footer）。其中軀干又水平分成三欄，從左到右為：導航、主欄、副欄。
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;
}
}
這里面需要注意的點有
container的flex-direction: column這樣保證了header,body,footer是在垂直軸上排列
header,footer的高度可以通過flex: 0 0 100px來控制
nav可以通過order:-1來調(diào)整位置
通過@media (max-width: 768px)來調(diào)整小屏幕的頁面結(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%;
}
這個和上面的基本差不多就不做解釋了。
每行的項目數(shù)固定，會自動分行。
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é)的一些布局。如有錯誤，歡迎指正。更多系列文章
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116023.html
摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局 水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，...
摘要：中的有些元素也是這樣，他們有的只對牛奶感興趣，有的只喜歡吃堅果和果凍，而討厭牛奶。我稱之為果凍依賴型元素，又稱之為依賴型元素，也就是說只有一個元素屬于或是也可以理解為水平水平，其身上的屬性才會起作用。 單列布局 水平居中 水平居中的頁面布局中最為常見的一種布局形式，多出現(xiàn)于標題，以及內(nèi)容區(qū)域的組織形式，下面介紹四種實現(xiàn)水平居中的方法（注：下面各個實例中實現(xiàn)的是child元素的對齊操作，...
摘要：布局是年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。實踐用來實現(xiàn)圣杯布局圣杯布局指的是一種最常見的網(wǎng)站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應(yīng)。 Flex 布局是 W3C 2009年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。Flex 布局使用起來是非常簡單的，本文談一談平時使用可能需要注意的問題。 align-content 平時使用 ...
閱讀 3659·2021-09-22 15:15
閱讀 3564·2021-08-12 13:24
閱讀 1312·2019-08-30 15:53
閱讀 1824·2019-08-30 15:43
閱讀 1184·2019-08-29 17:04
閱讀 2794·2019-08-29 15:08
閱讀 1582·2019-08-29 13:13
閱讀 3088·2019-08-29 11:06
