[Flex Elastic Layout]の各種プロパティをドラッグ＆ドロップで視覚的に直感的に分かりやすく実践する方法をステップバイステップで教えます！
プロセス全体は、CSS コードを 1 行も手動で記述することなく、ZhongTouch アプリケーション プラットフォーム上で実行されます。
flex-direction : アイテムの配置方向を決定する主軸の方向
-
行: デフォルトの配置方向、つまり主軸が水平方向、開始点が左側です。
-
row-reverse: 主軸は水平、開始点は右側です
-
列: 主軸は垂直方向、始点は上端です
-
列反転: 主軸は垂直であり、開始点は下端です
flex-wrap : 1行で項目が入りきらない場合、折り返すか否か、折り返す方法
-
nowrap: デフォルト値、つまり改行なし
-
ラップ: 改行、上の最初の行
-
Wrap-reverse: 改行、最初の行は下にあります
align-items : 交差軸が上から下に配置されていると仮定した、交差軸上の項目の配置
-
flex-start: 交差軸の始点を揃えます。
-
flex-end: 交差軸の端を揃えます。
-
center: 交差軸の中点を揃えます。
-
ベースライン: アイテム内のテキストの最初の行のベースライン配置
-
ストレッチ: デフォルト値、項目の高さは固定されておらず、各項目はコンテナーの高さを占めます。
justify-content : 主軸が左から右に水平に配置されていると仮定した、主軸上の項目の配置
-
flex-start: デフォルト値、左揃え
-
フレックスエンド: 右揃え
-
中心: 中心
-
space-between: 両端が揃っており、各項目間の間隔が等しい
-
space-around: 各項目の両側に等間隔で配置します。
align-content : コンテナー内に複数の主軸がある場合、これらの軸の配置を定義できます。
-
flex-start: 交差軸の開始点に位置合わせします。
-
flex-end: 交差軸の端に位置合わせします。
-
center: 交差軸の中点に位置合わせします。
-
space-between: 交差軸の両端に合わせて、軸間の間隔が均等になるように配置します。
-
space-around: 各軸の両側の間隔が等しい
-
ストレッチ: デフォルト値、軸は交差軸全体を占め、均等に分散されます。
align-self : 単一項目の配置を他の項目とは異なるように設定します。その属性値は基本的に align-items 属性の属性値と同じですが、デフォルト値は親の属性値を継承する auto です。要素。
アライメントの例:
待ちきれません。実際に試してみてください: Zhongtouch ローコード アプリケーション プラットフォーム編集モード
哔哩哔哩にアクセスして詳細な指導ビデオをご覧ください: [群集タッチコース] Flex Elastic Layout_哔哩哔哩_bilibili
さらに詳しい教育ビデオについては、Bilibili スペースに移動してください。Zhongtouchアプリケーション プラットフォームのパーソナル スペース_哔哩哔哩_Bilibili には、さまざまなフロントエンド視覚化ケースのデモンストレーションと説明だけでなく、複数の完全に機能する Web サイト アプリケーション ケースもあります。開発プロセスのデモと説明では、ZhongTouch アプリケーション プラットフォームが主なアプリケーション開発です。