日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Flex布局（一）flex-direction

發布時間：2025/4/9 编程问答 21 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Flex布局（一）flex-direction 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

采用Flex布局的元素，被稱為Flex容器(flex container)，簡稱"容器"。其所有子元素自動成為容器成員，成為Flex項目(Flex item)，簡稱"項目"

Flex-direction調整主軸方向（默認為水平方向）包括row、column、row-reverse、column-reverse

代碼

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • ???<meta charset="UTF-8">
  • ???<title>CSS3伸縮布局</title>
  • ???<style>
  • ??????body {
  • ?????????margin: 0;
  • ?????????padding: 0;
  • ?????????font-family: '微軟雅黑';
  • ?????????background-color: #F7F7F7;
  • ??????}
  • ??????ul {
  • ?????????margin: 0;
  • ?????????padding: 0;
  • ?????????list-style: none;
  • ??????}
  • ??????.wrapper {
  • ?????????width: 1024px;
  • ?????????margin: 0 auto;
  • ??????}
  • ??????.wrapper > section {
  • ?????????min-height: 300px;
  • ?????????margin-bottom: 30px;
  • ?????????box-shadow: 1px 1px 4px #DDD;
  • ?????????background-color: #FFF;
  • ??????}
  • ??????.wrapper > header {
  • ?????????text-align: center;
  • ?????????line-height: 1;
  • ?????????padding: 20px;
  • ?????????margin-bottom: 10px;
  • ?????????font-size: 30px;
  • ??????}
  • ??????.wrapper section > header {
  • ?????????line-height: 1;
  • ?????????padding: 10px;
  • ?????????font-size: 22px;
  • ?????????color: #333;
  • ?????????background-color: #EEE;
  • ??????}
  • ??????.wrapper .wrap-box {
  • ?????????padding: 20px;
  • ??????}
  • ??????.wrapper .brief {
  • ?????????min-height: auto;
  • ??????}
  • ??????.wrapper .flex-img {
  • ?????????width: 100%;
  • ??????}
  • ??????/*全局設置*/
  • ??????section ul {
  • ?????????display: flex;
  • ??????}
  • ??????section li {
  • ?????????width: 200px;
  • ?????????height: 200px;
  • ?????????text-align: center;
  • ?????????line-height: 200px;
  • ?????????margin: 10px;
  • ?????????background-color: pink;
  • ??????}
  • ??????/*垂直方向*/
  • ??????section:nth-child(2) ul {
  • ?????????display: flex;
  • ??????}
  • ??????.column ul {
  • ?????????flex-direction: column;
  • ??????}
  • ??????.row-reverse ul {
  • ?????????flex-direction: row-reverse;
  • ??????}
  • ??????.column-reverse ul {
  • ?????????flex-direction: column-reverse;
  • ??????}
  • ??????/*1、指定一個盒子為伸縮盒子 display: flex*/
  • ??????/*2、設置屬性來調整此盒的子元素的布局方式 例如 flex-direction*/
  • ??????/*3、明確方向*/
  • ??????/*4、它可互換主側軸，也可改變方向*/
  • ???</style>
  • </head>
  • <body>
  • ???<div class="wrapper">
  • ??????<header>CSS3-伸縮布局詳解</header>
  • ??????<!-- 簡介 -->
  • ??????<section class="brief">
  • ?????????<header>flex-direction</header>
  • ?????????<div class="wrap-box">
  • ????????????<p>調整主軸方向（默認為水平方向）包括row、column、row-reverse、column-reverse</p>
  • ?????????</div>
  • ??????</section>
  • ??????<!-- 分隔線 -->
  • ??????<section>
  • ?????????<header>flex-direction</header>
  • ?????????<div class="wrap-box">
  • ????????????<p>調整主軸方向（默認為水平方向）</p>
  • ????????????<ul>
  • ???????????????<li>1</li>
  • ???????????????<li>2</li>
  • ???????????????<li>3</li>
  • ????????????</ul>
  • ?????????</div>
  • ??????</section>
  • ??????<section class="column">
  • ?????????<header>column</header>
  • ?????????<div class="wrap-box">
  • ????????????<p>調整主軸方向（默認為水平方向）</p>
  • ????????????<ul>
  • ???????????????<li>1</li>
  • ???????????????<li>2</li>
  • ???????????????<li>3</li>
  • ????????????</ul>
  • ?????????</div>
  • ??????</section>
  • ??????<section class="row-reverse">
  • ?????????<header>row-reverse</header>
  • ?????????<div class="wrap-box">
  • ????????????<p>調整主軸方向（默認為水平方向）</p>
  • ????????????<ul>
  • ???????????????<li>1</li>
  • ???????????????<li>2</li>
  • ???????????????<li>3</li>
  • ????????????</ul>
  • ?????????</div>
  • ??????</section>
  • ??????<section class="column-reverse">
  • ?????????<header>column-reverse</header>
  • ?????????<div class="wrap-box">
  • ????????????<p>調整主軸方向（默認為水平方向）</p>
  • ????????????<ul>
  • ???????????????<li>1</li>
  • ???????????????<li>2</li>
  • ???????????????<li>3</li>
  • ????????????</ul>
  • ?????????</div>
  • ??????</section>
  • ???</div>
  • </body>
  • </html>

    • 轉載于:https://www.cnblogs.com/wangyawei/p/9103573.html

    總結

    以上是生活随笔為你收集整理的Flex布局（一）flex-direction的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。