百度任務(wù)10-flex布局

FrozenMap 發(fā)布于2019-08-29 13:26 / 1149人閱讀

摘要：代碼代碼效果圖這時(shí)候再給添加沒有變化。變?yōu)樽優(yōu)檫@時(shí)候那兩行被綁在了一起，要?jiǎng)佣际且黄饎?dòng)。忽略第步給加屬性結(jié)果整個(gè)就挨一起去了。給加屬性結(jié)果結(jié)論和作用一樣，不過這是縱向的。

html代碼：

CSS代碼

.box{
            width: 500px;
            height: 300px;
            display: flex;
            border: 1px solid red;
            justify-content: space-between;
            flex-wrap: wrap;
}
.box div{
        background: green
}
.div1{
width: 120px;
height: 80px;
}
.div2{
width: 100px;
height: 40px;
}
.div3{
width: 60px;
height: 40px;
}
.div4{
width: 300px;
height: 40px;
}

效果圖：

2. align-items

這時(shí)候再給.box添加align-items:flex-start;,沒有變化。

align-items:center變?yōu)椋?/p>

align-items:flex-end變?yōu)椋?/p>

這時(shí)候那兩行被綁在了一起，要?jiǎng)佣际且黄饎?dòng)。 3.align-content

忽略第2步
給.box加屬性align-content:flex-start,結(jié)果：

整個(gè)就挨一起去了。

給.box加屬性align-content:space-between,結(jié)果：

結(jié)論：和justify-content作用一樣，不過這是縱向的。

云服務(wù)器 GPU云服務(wù)器 win7任務(wù)欄布局問題定時(shí)任務(wù)與觸發(fā)任務(wù) 工作流任務(wù)和節(jié)點(diǎn)任務(wù) div布局布局html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112605.html

相關(guān)文章

解決flex布局新舊版本的兼容性寫法

摘要：最新開發(fā)的項(xiàng)目用了的新特性布局，遇到了兼容性的問題。那么新舊版本是什么布局分為舊版本，過渡版本，以及現(xiàn)在的標(biāo)準(zhǔn)版本。所以如果你只是寫新版本的語法形式，是肯定存在兼容性問題的。最新開發(fā)h5的項(xiàng)目用了css的新特性flex布局，遇到了CSS兼容性的問題。在網(wǎng)上找到了如下的解決辦法。我寫頁面的時(shí)候用到過很多的flex布局，覺得非常好用。下面附上一篇不錯(cuò)的flex布局介紹的文章。?Flex...

raoyi 2019-08-30 15:54 評(píng)論0 收藏0
百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。在前端布局的時(shí)候，先不要設(shè)計(jì)太多什么margin,paddin...

CoyPan 2019-08-30 15:52 評(píng)論0 收藏0
百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

摘要：經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。經(jīng)過了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見解，很多前端新手就是沒有理解怎么布局而一直學(xué)不好先說一下，我個(gè)人理解的前端布局的思想吧。在前端布局的時(shí)候，先不要設(shè)計(jì)太多什么margin,paddin...

YacaToy 2019-08-01 16:12 評(píng)論0 收藏0
百度ife任務(wù)3總結(jié)

摘要：在做百度的任務(wù)，沒能組隊(duì)成功只好自己做，如果現(xiàn)在還有收人的請(qǐng)務(wù)必帶上我哦。因?yàn)槊撾x標(biāo)準(zhǔn)文檔流，父元素?zé)o法自適應(yīng)高度。問題能不能在不改變結(jié)構(gòu)的情況下僅憑達(dá)到列式中間居中自適應(yīng)寬度的效果在做百度ife的任務(wù)，沒能組隊(duì)成功只好自己做，如果現(xiàn)在還有收人的請(qǐng)務(wù)必帶上我哦。 task3作業(yè)地址：https://github.com/emonki/BaiduIfe/tree/...*demo還不會(huì)...

xcold 2019-08-30 12:55 評(píng)論0 收藏0
css3 彈性布局和多列布局

摘要：彈性盒子基礎(chǔ)彈性盒子是中盒子模型的彈性布局，在傳統(tǒng)的布局方式上增加了很多靈活性。定義一個(gè)彈性盒子在父盒子上定義屬性內(nèi)核瀏覽器的兼容設(shè)置，下同當(dāng)然還有行內(nèi)布局的彈性盒子注意，設(shè)為布局以后，子元素的和屬性將失效。彈性盒子基礎(chǔ) 彈性盒子(Flexible Box)是css3中盒子模型的彈性布局，在傳統(tǒng)的布局方式上增加了很多靈活性。定義一個(gè)彈性盒子在父盒子上定義display屬性： #b...

stormzhang 2019-08-29 16:38 評(píng)論0 收藏0