TIL#4 CSS Flexbox:親ではなく子供を移動!

11566 ワード
CSS Flexbox テキストリンク
Flexboxは現在、cssに不可欠な要素に発展しています.本当に一度も書いたことがないようですしかし、私はもっと多くの機能があって、もっと多様に使えると思います.毎日使うものだけです.加えて親の器だけが動いていて、子供たちの物も動く機能があるのですが、忘れてしまいました.だから整理しなきゃ!

Flexboxは1つのサブエレメントしか移動できません!


<style>
  .parent {
  	display: flex;
  	justify-content: space-around;
  	color: white;
  	height: 100px;
  	background-color: #fffff1;
  }
  .child:first-child {
  	background-color: red;
  	width: 30px;
  	height: 30px;
  }
  .child:nth-child(2) {
  	background-color: orange;
  	width: 30px;
  	height: 30px;
  }
  .child:last-child {
  	background-color: royalblue;
  	width: 30px;
  	height: 30px;
  }
</style>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</body>
親要素に3つのサブ要素divがあると仮定します.
2番のdivボックスを縦軸の真ん中に移動したいだけなら、どうすればいいですか?

align-self


  .child:nth-child(2) {
  	background-color: orange;
  	width: 30px;
  	height: 30px;
  	align-self: center;
  }
対応するサブエレメントにalign-sselfのみ追加!
注意事項!align-sselfプロパティを使用するには、親要素に高さ値が必要です.なければ、何の反応もないように見えます.

align-content


flexbox行間の間隔を小さくするには、次の手順に従います.
flex-wrap:wrapプロパティを使用すると、2行、3行のbox要素がある場合があります.
高さ値heightを指定すると、その高さに応じて行間隔が自動的に調整されます.すなわち、align-contentは行間隔を調整できます.でもこの部分もheightを調整すればいいと思うので、あまり使わないので、複数行の間隔の中で1つの間隔だけ変えると役に立つはずです.
名前はcontentですが、lineに関連するプロパティ!

このようにして、2行の間に間隔があります.
間隔を外して、下の行を上に貼りたいなら
.parent {
  	flex-wrap: wrap;
    align-content: flex-start;
  }

垂直軸の真ん中に隙間を付ける場合は、
.parent {
  	flex-wrap: wrap;
    align-content: center;
  }
など、いろいろな属性があります.

Order


箱の順番を変更したい場合は
HTMLの変更にorderプロパティを使用できません.
だからあまりよく使われる属性ではありません.

最初の箱order: 1属性をあげて、最後に行きました.複数のサブエレメントに1つのorderプロパティしか与えられない場合、そのエレメントは最後の位置になります.ただし、すべてのサブエレメントの順序を変更する必要がある場合は、その場所を指定できます.
  .child1:first-child {
  	background-color: red;
  	width: 30px;
  	height: 30px;
    order: 1
  }
  .child1:nth-child(2) {
  	background-color: orange;
  	width: 30px;
  	height: 30px;
  }
  .child1:last-child {
  	background-color: royalblue;
  	width: 30px;
  	height: 30px;
  }
今回はすべてのサブエレメントに順番を決めました.
  .child1:first-child {
  	background-color: red;
  	width: 30px;
  	height: 30px;
    order: 3
  }
  .child1:nth-child(2) {
  	background-color: orange;
  	width: 30px;
  	height: 30px;
    order: 2
  }
  .child1:last-child {
  	background-color: royalblue;
  	width: 30px;
  	height: 30px;
    order: 1
  }
数字が小さいほど、前の順番になります.
上のコード

こうなります.
align-contentはflex-wrapプロパティを記述するときに使用できるプロパティであることを覚えておいてください.

flex-grow, flex-shrink, flex-basis


ウィンドウ幅を2倍に減らしたい場合はflex-screw、



デフォルト値はflex-shrink: 1です.
.child:nth-child(2) {
  background-color: orange;
  width: 100px;
  height: 30px;
  flex-shrink: 2;
 }

プロパティflex-growは、ウィンドウ幅が小さくなってから他のボックスと同じ大きさにします。



デフォルト値はflex-grow: 0です.flex-grow: 1になると、周囲の余分な空間を占めています.したがって、ウィンドウの幅を徐々に小さくすると、ウィンドウの幅は他のボックス要素と同じになります.
注意!flex-grow: 1も周囲の空間を占めているなら、2、3のお金をあげるのも同じです.
.child4:nth-child(2) {
  	background-color: orange;
  	width: 50px;
  	height: 30px;
  	flex-grow: 2;
  }
特にこれらの属性は反応型レイアウトに非常に有用である.

flex-basesプロパティを使用して要素の初期値を設定する


サブエレメントで設定します.
flex-basicはwidthと値が異なります.
flex-basicは主軸方向の大きさです.
flex-growまたはflex-sriskによるねじれまたはストレッチの前に初期値を設定します.
flex-basicは、定義されていないwidthと同じです.だからそんなに使えない.
今日はflexboxの使いにくい属性を学びました.今度はグリッドを整理しなければなりません!
22.3.29航海996期第4週第4日TIL
システムマネージャでデータベースをバックアップし、データベースを復元する方法[コード]