ホームページ  >  記事  >  ウェブフロントエンド  >  css3 レイアウト属性 flex の使用方法の詳細な紹介

css3 レイアウト属性 flex の使用方法の詳細な紹介

高洛峰
高洛峰オリジナル
2017-03-16 09:42:571680ブラウズ

この記事では CSS3 レイアウトプロパティflex の使用について詳しく説明します

HTML コードは次のとおりです:


<ul class="ul_box">
    <li><a href="#">html</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">javascript</a></li>
    <li><a href="#">html5</a></li>
    <li><a href="#">css3</a></li>
    <li><a href="#">jquery</a></li></ul>


CSS コードは次のとおりです:


.ul_box{
    margin:0;
    padding: 0;
    list-style: none;    /*display: flex将对象作为弹性伸缩盒显示;
    flex-flow:flex-direction(确定弹性子元素排列方式)和
              flex-wrap(当弹性子元素超出弹性元素容器范围时是否换行)的复合属性,
    写入父容器里;    */
    display: flex;
    flex-flow: row wrap;
}.ul_box li{
    text-align: center;
    height:40px;
    line-height: 40px;    /*flex:flex-grow(设置弹性子元素的扩展比率)
     *        flex-shrink(设置弹性子元素的收缩比率)
     *        flex-basis(指定弹性子元素伸缩前的默认大小值,相当于width和height属性。)
     * 这三种属性的复合属性,写入子容器里;*/
    flex: 1 1 100%;
}.ul_box li a{
    text-decoration: none;
    color:#fff;
}.ul_box li:nth-child(1){
    background: #008000;
}.ul_box li:nth-child(2){
    background: #4169E1;
}.ul_box li:nth-child(3){
    background: #8A2BE2;
}.ul_box li:nth-child(4){
    background: #A52A2A;
}.ul_box li:nth-child(5){
    background: #FFA500;
}.ul_box li:nth-child(6){
    background:#9ACD32;
}@media (min-width:480px ) {
    .ul_box li{
        flex: 1 1 50%;
    }}
@media (min-width:768px ) {
    .ul_box{
        flex-flow: row nowrap;
    }}


6物件コンテナに設定する :

  • flex-direction コンテナ内でのアイテムの配置方向(デフォルトは横配置)

  • flex-wrap コンテナ内でのアイテムのラッピング方法

  • flex-flow の略称上記の 2 つのプロパティのうち

  • just ify-content 主軸上での項目の配置方法

  • align-items 交差軸上での項目の配置方法

  • align-content の配置を定義します複数の軸。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。

コンテナ内のアイテムのプロパティ:

  • order アイテムが並べ替えられる順序。値が小さいほどランクが高くなります。デフォルトは 0 です。 order  项目的排列顺序。数值越小,排列越靠前,默认为0。

  • flex-grow  项目的放大比例,默认为<code>0,即如果存在剩余空间,也不放大。

  • flex-shrink  项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

  • flex-basis  在分配多余空间之前,项目占据的主轴空间(<a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为<code>auto,即项目的本来大小。

  • flex  是<code>flex-growflex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

  • align-self  允许单个项目有与其他项目不一样的对齐方式,可覆盖<code>align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

flex-grow 項目の拡大率、デフォルトは<code>0、つまりスペースが残っている場合は拡大されません。

🎜🎜flex-shrink アイテムの収縮率、デフォルトは1、つまりスペースが不十分な場合、アイテムは縮小します。 🎜🎜🎜🎜flex-basis 余分なスペースを割り当てる前にアイテムが占めていた主軸スペース (<a href="http://www.php.cn/wiki/646.html" target=" _blank">メイン🎜 サイズ)。ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します。デフォルト値は <code>auto で、プロジェクトの元のサイズです。 🎜🎜🎜🎜flex は、<code>flex-growflex-shrink、および flex-basis の省略形です、デフォルト値は 0 1 auto です。最後の 2 つのプロパティはオプションです。 🎜🎜🎜🎜align-self <code>align-items 属性をオーバーライドすることで、単一の項目を他の項目とは異なる方法で配置できるようにします。デフォルト値は auto です。これは、align-items を継承することを意味します。 属性は、親要素がない場合、stretch と同等です。 🎜🎜🎜🎜🎜

以上がcss3 レイアウト属性 flex の使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。