CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3を使用してFlexアイテムのラッピングを有効にする

CSS3を使用してフレックスアイテムのラッピングを有効にするには、flex-wrapプロパティを使用します。値の折り返しを設定して、折り返しを有効にします。

以下は、CSS3-

を使用してフレックスアイテムのラッピングを有効にするためのコードです。

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   height: 300px;
   display: flex;
   width: 300px;
   border: 2px solid red;
   flex-wrap: wrap;
}
div {
   width: 150px;
   height: 100px;
   color: white;
   text-align: center;
   font-size: 20px;
}
.first {
   background-color: rgb(55, 0, 255);
}
.second {
   background-color: red;
}
.third {
   background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Flex wrap example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>

出力

CSS3を使用してFlexアイテムのラッピングを有効にする

上記のコードは次の出力を生成します-


  1. CSS3を使用して複数のトランジションを実行する

    複数のトランジションの場合は、省略形のプロパティであるCSS3トランジションプロパティを使用します。遷移のプロパティ、期間、タイミング、および遅延を1行で設定します。 以下は、CSS3-を使用して複数の遷移を実行するためのコードです。 例 <!DOCTYPE html> <html> <head> <style> .container div {    width: 300px;    height: 100px;    border-radius: 1px;    

  2. CSS3フレキシブルボックスレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、CSS3-を使用して柔軟なレイアウトを表示するコードです。 例 <