Web フロントエンド Web ページの開発および設計プロセスでは、レイアウトは非常に重要な部分です。レイアウトは、ページ上のさまざまなコンポーネントや要素のサイズと位置を決定するために使用されます。この章では、CSS3 レイアウト モデルであるフレックス ボックス モデル (フレックス ボックス) を紹介します。これにより、CSS3 におけるフレックス ボックスとは何か、また、フレックス ボックスとボックスの属性値の違いと使用法を理解できるようになります。フレックスボックスの表示属性の困っている友人は参考にしていただければ幸いです。
1: フレキシブルボックスとは何ですか
CSS3 フレキシブル ボックス (フレキシブル ボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。フレックスボックス レイアウト モデルを導入する目的は、コンテナ内の子要素に空のスペースを配置、整列、割り当てするためのより効率的な方法を提供することです。一般的な複雑なレイアウトのニーズの多くを簡単な方法で満たすことができます。その利点は、開発者が特定の実装方法を指定せずに、レイアウトが持つべき動作を宣言するだけであることです。実際のレイアウトはブラウザーが担当します。このレイアウト モデルは、主要なブラウザでサポートされています。
2: CSS3 フレキシブルボックスのコンテンツ
フレキシブル ボックスは、フレキシブル コンテナ (Flex コンテナ) とフレキシブル サブ要素 (Flex アイテム) で構成されます。
フレキシブル コンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブル コンテナとして定義されます。
フレキシブル コンテナには 1 つ以上のフレキシブル サブ要素が含まれます。
注: フレキシブル コンテナの外側とフレキシブル サブ要素の内側は通常どおりレンダリングされます。フレックス ボックスは、フレックス 子要素がフレックス コンテナ内でどのようにレイアウトされるかを定義するだけです。
3:display:box と display:flex の違いと使い方
1.display:box は主に親コンテナ内の子要素の配置、順序、垂直 (水平) 配置を制御します
display:box は2009 年より前の構文は古いため、対応する接頭辞を使用する必要があります。
互換性コードはおおよそ次のとおりです
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex;例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display: box;</title>
<style>
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}
.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>レンダリング:
display:box 伸縮ボックス属性を親要素に宣言した後、ボックス全体がブロック要素であることを意味しますがインライン要素になった場合、親要素内の子要素は、各ブロック要素が独自の行を占有する代わりに、自由にスペースを割り当てることができ、1 つの行にまとめて配置されるようにネゴシエートされます。たとえば、上の例では、div 内の 3 つの p タグが階層的に分散されるのではなく、1 行に表示されます。 2 つ: display:flex は主に、親コンテナの幅に応じて子コンテナを分割することを可能にします。
display:flex; は 2011 年以降に登場し、将来的にはほとんどの新しいブラウザで標準の構文になります。基本的には使用しないでください。現時点では Apple ブラウザのみが Webkit プレフィックスを使用しており、その他は正常に表示されます。
新しいバージョンでは、伸縮ボックスの表示属性を次のように設定します:
display:flex; コンテナボックスモデルをブロックレベルのエラスティックボックスとして表示します (新バージョン)
display:inline-flex; コンテナ ボックス モデルをインライン レベルのエラスティック ボックスとして表示します (新バージョン)
まず第一に、flex の使用には親コンテナが必要であり、親コンテナ.
親コンテナ: コンテナ
属性:
display:flex;/*flex block level, inline-flex: inline fast*/
justify-content:space-around;/*center:horizontally center, flex-start:close Left; flex-end: 右へ; space-between: 両側に寄り、中央で均等に分割; space-around: 完全な均等配分*/
align-items: ストレッチ;/*center : 垂直中央、flex-start: 上へ、flex-end: 下へ、space-between、space-around*/
flex-direction: row;/*列は上から下に配置、column-reverse , row:左から右へ、row-reverse:右から左へ*/
flex-wrap:wrap;/*複数行表示を折り返す(親コンテナで表示しきれない場合は上から下へ), nowrap (コンテナの幅が十分でない場合、子要素は親コンテナの幅または高さを二等分します)、wrap-reverse: 下から上へ */
/*flex-flow は flex-direction の略語です。 flex-wrap*/
例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display:flex;</title>
<style>
.container{
width:600px;
height:400px;
border:1px solid #000;
display:flex;/*flex块级，inline-flex:行内快*/
justify-content:space-around;
align-items:stretch;
flex-direction: row;
flex-wrap:wrap;
/*flex-flow是flex-direction、flex-wrap的缩写*/
}
.box{
width:200px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div>
<div>这是中间的box1</div>
<div>这是中间的box2</div>
</div>
</body>
</html>Rendering:
Flex レイアウトに設定した後は、子要素の float、clear、およびvertical-align 属性が無効になることに注意してください。
以上がCSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。
css3什么是自适应布局Jun 02, 2022 pm 12:05 PM自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。
css3动画效果有变形吗Apr 28, 2022 pm 02:20 PMcss3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。
css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。
css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PMcss3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。
一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ホットトピック
7433
15135952