フレックスレイアウトの例説明

Flex レイアウトを使用すると、フロートや位置などを気にすることなく、いくつかのブロックをすばやくレイアウトして、必要な効果を実現できます。Web ページをレイアウトするときは、特別なレイアウトが必要になることがよくありますが、Flex を使用すると、それらをすばやくレイアウトできます。レイアウトには位置決めは必要ありません。

どのボックスもフレックス レイアウトとして指定できますが、フレックス レイアウトに設定した後は、float、clear および vertical-align 属性は効果がありません。 float、clear和vertical-align属性将失效。

下面我们看看我们网站经常遇到实例:我们要让图片,文字居中并且都贴底部布局,以往的经验会,父容器设置text-align:center,但是垂直方向就很繁琐了,

要么父容器设置padding-top,

要么给图片设置margin-top;

要么position去定位;

但是注意了:虽然你这样设置也能办到,但是换一张图片,大小不一致的话,哈哈,你就哭吧;

flex出场了,这时候你只需要在

父容器{

    display: flex;
    flex-direction:column;//让子元素纵向布局
    justify-content:flex-end;//子元素垂直方向布局，依次向下
    align-items: center;//让子元素水平方向居中

}

 

同理垂直居中的话只需要

justify-content:center;垂直方向居中

如果是想要图片居顶部,文字居底部;justify-content: space-between;//两端对齐

这是常见的上下布局

justify-content有下面几个属性

• flex-start（默认值）：

  flex-direction:column时候为上对齐

  flex-direction:row为左对齐

• flex-end：同理column下对齐    row为右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

左右就更简单了,对flex感兴趣的可以自己去试试;

下面来具体将flex里面的各种属性,

以下6个属性设置在容器上。

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

 

 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {  flex-direction: row | row-reverse | column | column-reverse;}

 

它可能有4个值。

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

row 和column上面演示过了,就是顺序

row-reverse为水平倒序;                                                                           

 column-reverse为垂直倒序

 

 

flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{  flex-wrap: nowrap | wrap | wrap-reverse;}

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {  flex-flow: <flex-direction> || <flex-wrap>;}

 

align-items属性

align-items:其实跟justify-content属性差不多,如果在没有指定flex-direction;的时候 

align-items就是垂直方向上变化位子关系;justify-content就是水平方向上变化位子关系

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}

 

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline

  私たちの Web サイトでよく見かける例を見てみましょう。写真とテキストを中央に配置し、それらをすべて下部のレイアウトに配置したいと考えています。これまでの経験では、親コンテナーは text-align:center を設定しますが、垂直方向は非常に面倒です。🎜🎜 親コンテナが、padding-top を設定するか、画像の margin-top を設定する 🎜🎜 か、position を 🎜🎜 に設定します。ただし、この設定で実行できますが、画像を変更してサイズが一貫していない場合は、🎜🎜flex が表示されるので、あとは 🎜🎜親コンテナ {🎜

  .item {  flex-grow: <number>; /* default 0 */}

  🎜}🎜🎜 🎜🎜🎜🎜同様に、垂直方向の中央に配置したい場合は、🎜

  .item {  flex-basis: <length> | auto; /* default auto */}

  🎜🎜

  .item {  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]}

  🎜🎜🎜これは一般的な上下レイアウトです 🎜

  .item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

  • 🎜flex-start (デフォルト値) : 🎜rrreeerrreee
  • 🎜flex -end: 同様に列は下揃え、行は右揃えになります🎜
  • 🎜center: 中央揃え🎜
  • 🎜space-between : 項目間の均等な間隔で両端を揃えます。 🎜
  • 🎜space-around: 各項目は両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。 🎜
  🎜 Flex に興味がある場合は、さらに簡単に試してみることができます。🎜🎜🎜🎜それでは、flex のさまざまなプロパティを具体的に設定してみましょう🎜🎜コンテナ上の次の 6 つのプロパティです。 🎜

  • 🎜flex-direction🎜
  • 🎜flex-wrap🎜
  • 🎜flex-flow🎜 li>
  • 🎜justify-content🎜
  • 🎜align-items🎜
  • 🎜align-content🎜

  🎜 🎜

  flex-direction プロパティ

  🎜flex-direction プロパティは、主軸の方向 (つまり、項目の配置方向) を決定します。 🎜

  rrreee

  🎜 🎜🎜値は 4 つある場合があります。 🎜

  • 🎜row (デフォルト値): 主軸は水平であり、開始点は左端にあります。 🎜
  • 🎜row-reverse: 主軸は水平であり、開始点は右端にあります。 🎜
  • 🎜column: 主軸は垂直であり、開始点は上端にあります。 🎜
  • 🎜column-reverse: 主軸は垂直であり、開始点は下端にあります。 🎜

  🎜行と列は上で説明しましたが、順序 🎜🎜row-reverse は水平方向の逆順です。 /upload/article/000/000/001/4f89607b825c907d58dc8b8092ec9585-5.png" alt=""/>🎜🎜列反転は垂直方向の逆順です🎜🎜🎜🎜 🎜🎜 🎜

  flex-wrap プロパティ

  🎜 デフォルトでは、項目は 1 行に配置されます (別名、 「軸」として）。 flex-wrap 属性は、1 つの軸が収まらない場合に線を折り返す方法を定義します。 🎜

  rrreee

  flex-flow

  🎜flex-flow プロパティは flex-direction プロパティであり、flex- Wrap 属性の省略形。デフォルト値は row nowrap です。 🎜

  rrreee

  🎜 🎜

  align-items 属性

  🎜align-items: 実際、flex-direction が使用されない場合、これは justify-content 属性と似ています。指定🎜🎜align-itemsは縦方向の位置関係を変更する; justify-contentは横方向の位置関係を変更する🎜

  rrreee

  🎜 🎜🎜5かかる場合もある価値観。特定の位置合わせは、交差軸の方向に関連します。以下では、交差軸が上から下であると仮定します。 🎜

  • 🎜flex-start: 交差軸の開始点を揃えます。 🎜
  • 🎜flex-end: 交差軸の終点を揃えます。 🎜
  • 🎜center: 交差軸の中点を揃えます。 🎜
  • 🎜baseline: アイテムのテキストの最初の行のベースライン配置。 🎜

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

   

  align-content属性

  align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

   align-content:center;就是让这三排盒子垂直方向居中                         

  

     如果你设置为align-item:content;就没有让三个盒子一起垂直居中的效果了

   

  
  .box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

   

  下面讲一点flex应用在子集元素上

  flex-grow属性

  flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  .item {  flex-grow: <number>; /* default 0 */}

   

  如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

   如果给所有子集都设置flex-grow:1;将会成右边图,平分宽度;同理也可以平分高度;

  

  例如给第三个盒子设置flex-grow:2,效果如下,第三个盒子分的宽度为其他的2倍

  

   

   

   

  flex-basis属性

  flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  .item {  flex-basis: <length> | auto; /* default auto */}

  它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

  其实这个跟flex-grow差不多,区别就在于可以单独设置其中某一个盒子的占比(长度或者宽度)

  给第三个盒子设置flex-basis:100px;

  给第九个盒子设置flex-basis:200px

   

   

  flex属性

  flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  .item {  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]}

  该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

   

  align-self属性

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

  .item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

  该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

  第三个盒子align-self:flex-end;

  第五个盒子align-self;stretch;

  第九个盒子align-self:flex-start;

  

以上がフレックスレイアウトの例説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。