flex-basesおよびwidthプロパティ

8351 ワード
CSS Flex テキストリンク
  • flex-basicプロパティは、flexプロジェクトの初期サイズを指定します.
  • flex-growプロパティは、flexアイテムがコンテナの残りのスペースを「どのくらいの割合で」充填できるかを決定します.
    • この時は少し注意が必要です.
    flex-basicは要素サイズ自体を決定する属性ではありません.
    たぶんこのようなコードがあります.
    const Field1 = styled.div`
  display: flex;
  flex-basis: 75%;
  background: lightcoral;
`;

const Field2 = styled.div`
  display: flex;
  flex-basis: 25%;
  background: lightgreen;
`;

const App = () => {
  return (
    <Container>
      <Field1>
        <List>
          <Item />
        </List>
      </Field1>
      <Field2></Field2>
    </Container>
  );
};
    Field1の属性を使用して、flex物品Field2、flex-basisがコンテナ全体に占める割合を定義します.(それぞれ75%と25%)
    子要素Itemが占める実際の幅が親要素Field1より小さい場合は問題ありません.
    しかし、そうでなければ予想とは違った結果になる.
    const App = () => {
  return (
    <Container>
      <Field1>
        <List>
          <Item />
          <Item />
          <Item />
          <Item />
          <Item />
        </List>
      </Field1>
      <Field2></Field2>
    </Container>
  );
};

    サブエレメントのサイズが大きくなると、flex-basisに指定された値は有効ではありません.Listにはoverflow-x = scrollの属性が与えられ、Itemの数が増加してもオーバーフローしないが、Field1の大きさに影響を及ぼす.flex-basis要素のサイズは強制されません.ベンドレイアウトでは、実際の要素のサイズは、基準値としてのみ使用される他の要因によって変化する場合があります.これはwidth属性と比較される.
    const Field1 = styled.div`
  display: flex;
  width: 75%;
  background: lightcoral;
`;

const Field2 = styled.div`
  display: flex;
  width: 25%;
  background: lightgreen;
`;
    flex-basisの代わりにwidthの属性で幅を指定すると、結果がよく表示されます.
    1012-有機白菜-DFS
    ベリーパイ4(0)pi 4にダウンロードソースを修正