Flex布局筆記

Lin_YT 發布于2019-08-29 17:00 / 1690人閱讀

摘要：布局教程地址控制換行屬性控制軸線的方向行行反轉列列反轉主軸線的對齊開始對齊結束對齊居中兩端水平分布等間距分布交錯軸線的對齊開始對齊結束對齊居中沿著他們自己的基線對齊與行高有關默認值所有容器一樣高默認的

Flex布局教程地址
https://www.youtube.com/watch...
https://paper.dropbox.com/doc...
https://www.w3cplus.com/css3/...

控制換行屬性

flex-wrap: wrap | nowrap | wrap-reverse；

flex-direction 控制軸線的方向
flex-direction: row | row-reverse | column | column-reverse;

           行     行反轉      列        列反轉

·justify-content:
Main-Axis, 主軸線的對齊
justify-content: flex-start | flex-end | center | space-between | space-around;

           開始對齊  結束對齊   居中   兩端水平分布     等間距分布

·align-items：
Cross-Axis, 交錯軸線的對齊
align-items: flex-start | flex-end | center | baseline | stretch;

         開始對齊   結束對齊     居中     沿著他們自己的基線對齊,與行高有關     默認值,所有容器一樣高

align-items: baseline；

align-items: center;

默認的Main-Axis方向是從左到右，Cross-Axis方向是從上到下吧？

當用 flex-direction: column 時，Main-Axis和Cross-Axis會向如下所看到的那樣改變：
flex-direction: column
align-item: felx-end;

flex速記

flex是flex-grow、flex-shrink和flex-basis三個屬性的速記（簡寫）

li { flex: 0 1 auto; }

上面的代碼相當于：

li { flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto; }

讓文字居中
除了text-align: center; line-height; 的方法外，還可用flex方法：

.four li{
    display: flex;
    justify-content: center;
    align-items: center;
}

讓flex項固定寬度,不跟隨內容自動伸展

設置flex項的寬度為0即可（貌似不兼容firefox）
.wrap{
　　display:flex;
}
.wrap .item{
　　flex:1;
　　width:0px;
}

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

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

筆記：flex 的完備性與正交性

摘要：筆記布局很容易與其他布局方式包括布局嵌套在一起，實際上它是一個獨立的盒子，這個盒子由一個元素稱為容器及其直接的子元素稱為項目構成。這個容器外部以及這些項目內部都不會受布局的影響。筆記： flex 布局很容易與其他布局方式（包括 flex 布局）嵌套在一起，實際上它是一個獨立的盒子，這個盒子由一個元素（稱為容器）及其直接的子元素（稱為項目）構成。這個容器外部以及這些項目內部都不會受 f...

MingjunYang 2019-08-29 13:46 評論0 收藏0
Flex布局語法筆記

摘要：布局的傳統解決方案，基于盒狀模型，依賴屬性屬性屬性。一基礎和術語布局是啥是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。基本概念采用布局的元素，稱為容器，簡稱容器。該屬性的個值分別表示具體對齊方式與軸的方向有關。 ???????網頁布局（layout）是 CSS 的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴 display 屬性 + position屬性 + floa...

legendmohe 2019-08-30 11:02 評論0 收藏0
CSS頁面布局筆記

摘要：居中布局水平居中父元素和子元素的寬度都未知優點兼容性好缺點子元素文本繼承了屬性，子元素要額外加優點只需要設置子元素的樣式優點居中子元素不會對其他元素產生影響缺點是的屬性，存在兼容性問題優點只需要設置父元素的樣式缺點兼容性問居中布局水平居中父元素和子元素的寬度都未知 inline-block + text-ailgn .child{display:inline-block;} ...

CoderDock 2019-08-28 18:14 評論0 收藏0
CSS 小結筆記之伸縮布局 (flex)

摘要：相關的各個屬性如下在父盒子定義，子盒子才能使用屬性設置子盒子的縮放比例，可以一起指定也可以單獨指定。子盒子在父盒子中的水平對齊方式。強行在一行顯示，因此每個盒子的大小都會減少。CSS flex 是一種伸縮布局，之前塊級元素布局在同一行，可以通過display或position或float來實現，而本篇介紹一個新的方法——flex（彈性布局）。 flex 為和模型布局提...

番茄西紅柿 2019-04-23 13:22 評論0 收藏0
CSS || flex筆記

摘要：五個取值與主軸方向有關默認值左對齊右對齊居中兩端對其，間的間隔距離相等每個兩側的間隔相等，相當于設置左右值相等。默認值為即使存在剩余空間寬度，也不放大。默認值為，表示本來的大小。 Flex布局 Flex是flexible box的簡稱，純粹用來布局的屬性 1 flex和inline-flex 任何容器都可以知道為Flex布局，塊級元素使用display: flex; ；行內元素使用i...

huhud 2019-08-29 12:16 評論0 收藏0