#08 flexプロパティを使ってみよう | 【旧版】詳解CSS フレックスボックス編 - プログラミングならドットインストール

最新版のレッスンがあります【最新版】CSS入門フレックスボックス編 (全22回)

動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合はヘルプ「動画が見られない場合について」もご覧ください。

この動画を見るには
プレミアムプランへの登録が必要です

まずは無料でユーザー登録

本のレッスンが完了！

文字起こしを表示する « 前へ次へ »

プレミアムプランに登録すると、全レッスンの文字起こしを見られるようになります。

詳しくみる

flexという一括指定プロパティの使い方について見ていきます。

flex
初期値に関する注意点

このレッスンの問題を報告する

flex: initial; の意味を教えてください

2022年9月3日

box3 に flex-grow: 2; を設定しているから、多く配分されているということですか？

2022年5月24日

flex: initial; はどういう場面で使うのですか？

2022年1月27日

basis を指定すると grow と shrink が無効になってしまう気がするのですが...

2022年1月27日

flex-basisが0%であるという状態が想像できません

2022年1月27日

なぜgrowとshrinkを一緒に指定しないといけないのでしょうか？

2022年1月27日

すべての質問と回答（115）

素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です

詳しくみる

ソースコードを閲覧するにはプレミアムプランへの登録が必要です

詳しくみる

このレッスンの問題を報告する

デモを閲覧するにはプレミアムプランへの登録が必要です

詳しくみる

index.html
css/styles.css

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSSの練習</title> <link rel="stylesheet" href="css/styles.css"> </head> <body>  </body> </html>

/* ここにコードを書いて確認することができます */

サーバーとの接続が切断されました。ブラウザを再読込してみてください。

保存しました

ファイル構成

index.html
css/styles.css

実行結果

ブラウザ実行環境を使ってみよう！

このレッスンでは、こちらにコードを打ち込みながら学習を進めていくことができます。

手元で実際に動作を確認しながら理解を深めていくと良いでしょう。

この機能を利用するにはプレミアムプランへの登録が必要です。

詳しくみる

【旧版】詳解CSS フレックスボックス編

ウェブページのレイアウトに広く使われている、CSSのフレックスボックスについて見ていきます。 (詳細へ...)

ログインして連続再生する動画一覧 (16)

お手本のコードと比較

をお手本のコードと比較しています。異なる箇所は赤色で表示されています。両者のコードに異なる箇所はありません。

お手本のコード

あなたのコード