Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

HTMLで新しいFlexboxAPIを使用したフルハイトアプリでのFlexboxと垂直スクロール

flexプロパティは、flex-grow、flex-shrink、およびflex-basisプロパティの省略形です。 flexプロパティは、柔軟なアイテムの柔軟な長さを設定します。

例- 

#container article {
   -webkit-flex: 1 1 auto;
   overflow-y: auto;
   height: 0px; /*here the height is set to 0px*/
}

最小の高さが必要な場合は、高さを使用します：100px; − min-height：100px;

とまったく同じです。 
#container article {
   -webkit-flex: 1 1 auto;
   overflow-y: auto;
   height: 100px; /*here the height is set to 100px*/
}

  1. CSS3のFlexboxを使用した水平および垂直方向の中央揃え

    Flexboxを使用した水平方向および垂直方向の中央揃えには、CSS3のalign-itemsプロパティを使用します。 align-itemsプロパティをcenterに設定します。 以下は、フレックスボックスを使用した水平および垂直の中央揃えのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .h-container

  2. HTMLとCSSを使用してサイドバーとメインコンテンツ領域を含むページを作成する

    HTMLと本文のサイズを100％に設定すると、流動的なサイドバーとメインコンテンツ領域を備えたWebページが作成されます。 次の例はこれを示しています。 例 <!DOCTYPE html> <html> <head> <style> html,body {    height: 100%;    color: white;    font-size: 2em;    line-height: 200px; } #parent {    displ