Go to Qiita Advent Calendar 2024 Top
LoginSignup
Pkun
@Pkun

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

flexbox の事がいまいち分かりません

Q&A

Closed

flexbox

解決したいこと

このお手本動画で見事にフレックスボックスが縦になったりお横になったりするんですが
https://youtu.be/KRGHNhEC6Hk

この自分がマネした以下のコードで全く挙動が違いました

.flex_continer {
display: flex;
flex-direction: column;
gap: 1rem;

content: "";
align-self: stretch;
border: solid;
}

.flexbox_training {
background-color: aqua;
flex: 1;
}

.flexbox_training2 {
background-color: rgb(211, 174, 39);
order: -1;
}

.flexbox_training3 {
background-color: rgb(39, 73, 211);
order: 1;
}

.flexbox_training4 {
background-color: rgb(211, 39, 145);

これが元になってる参考にしたいコードです

align-self stretchで境界線🎶
<親>
display: flex;
flex-direction: column;
gap: 1rem;
<親境界>
content: "";
align-self: stretch;✨
border: ○○;
<子>
flex: 1;
<子最初>
order: -1;
<子最後>
order: 1;

自分のcssコードどこが悪いんでしょうか？

あと、お手本コードの
<親境界>っていうのは何か別にdivタグとかで作るんでしょうか？

分かる方どうかよろしくお願いしますｍ（＿　＿）ｍ

0

3Answer

YottyPG
@YottyPG

コードを載せる際はコードブロックを利用すると見やすくなるので、コードブロックを利用した形でコードを掲載していただけるとありがたいです。
また、HTMLの構造によってスタイルの当たり方も変わってくるので、CSSと合わせてHTMLも載せていただけると回答者側も回答しやすくなると思います。

本題のフレックスボックスが縦になったり横になったりする件ですが、おそらくですがメディアクエリなどを利用して画面幅によって、flex-directionの値を変えているのではないかなと思います。
align-self: stretch;の活用の仕方がわからなかったですが、動画と同様の動きをするようなものを作ってみました。参考にしてみてください。

qiita.gif

See the Pen Untitled by yotty (@yotty) on CodePen.

2Like

Comments

  1. @Pkun

    Questioner

    ありがとうございます！参考にさせて頂き、さっそくマネしてやってみようと思います！m(_ _)m

  2. @Pkun

    Questioner

    勉強になります！ありがとうございます！！
albireo
@albireo

そんなにわかるわけではないですが、お手本は<親境界>,<子最初>,<子最後>が何かわかる人向けに極端に要約されたものなので、別のお手本を探した方がいいように思えます…:sweat_smile:

1Like

Comments

  1. @Pkun

    Questioner

    ありがとうございます＾＾
albireo
@albireo

よけいなお世話かもしれませんが、「コードブロック」が何のことかわからないかもしれないと思ったのでコードブロックの書き方へのリンクです。

具体例として @YottyPG さんの書かれたものを抜粋すると

```html:HTML
<div class="container">
  <div class="child">
    <h2 class="title">
      タイトル1
    </h2>
```

```css:CSS
.container{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.border{
  border: 1px solid #999;
}
```

のように書けば

HTML
<div class="container">
  <div class="child">
    <h2 class="title">
      タイトル1
    </h2>
CSS
.container{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.border{
  border: 1px solid #999;
}

という形で表示されます。

1Like

Comments

  1. @Pkun

    Questioner

    以前教えてもらったんですが、分からなかったので助かります！ありがとうございます♪m（＿　＿）m

Your answer might help someone💌

LoginSign Up