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

CSS3を使用した個々のFlexアイテムの並べ替え

CSS3を使用して個々のFlexアイテムを並べ替えるには、orderプロパティを使用します。以下は、フレックスアイテムを並べ替えるためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   height: 150px;
   display: flex;
   width: 100%;
   border: 2px solid red;
}
div {
   width: 200px;
   height: 150px;
   color: white;
   text-align: center;
   font-size: 30px;
}
.first {
   background-color: rgb(55, 0, 255);
   order:2;
}
.second {
   background-color: red;
   order:3;
}
.third {
   background-color: rgb(140, 0, 255);
   order:1;
}
</style>
</head>
<body>
<h1>Reordering individual items 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-を使用して柔軟なレイアウトを表示するコードです。 例 <