百度任務10-flex布局

FrozenMap 發布于2019-08-29 13:26 / 1154人閱讀

摘要：代碼代碼效果圖這時候再給添加沒有變化。變為變為這時候那兩行被綁在了一起，要動都是一起動。忽略第步給加屬性結果整個就挨一起去了。給加屬性結果結論和作用一樣，不過這是縱向的。

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

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

align-items:center變為：

align-items:flex-end變為：

這時候那兩行被綁在了一起，要動都是一起動。 3.align-content

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

整個就挨一起去了。

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

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

GPU云服務器云服務器 win7任務欄布局問題定時任務與觸發任務工作流任務和節點任務 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112605.html

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

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

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

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

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

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

YacaToy 2019-08-01 16:12 評論0 收藏0
百度ife任務3總結

摘要：在做百度的任務，沒能組隊成功只好自己做，如果現在還有收人的請務必帶上我哦。因為脫離標準文檔流，父元素無法自適應高度。問題能不能在不改變結構的情況下僅憑達到列式中間居中自適應寬度的效果在做百度ife的任務，沒能組隊成功只好自己做，如果現在還有收人的請務必帶上我哦。 task3作業地址：https://github.com/emonki/BaiduIfe/tree/...*demo還不會...

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

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

stormzhang 2019-08-29 16:38 評論0 收藏0