97人妻无码一区二区精品免费,99热精品久久只有精品,丰满人妻一区二区三区免费视频

1<\/div>\r\n????????
2<\/div>\r\n????????
3<\/div>\r\n????????
4<\/div>\r\n????<\/div>\r\n????\r\n????????
1<\/div>\r\n????????
2<\/div>\r\n????????
3<\/div>\r\n????????
4<\/div>\r\n????<\/div>\r\n????\r\n????????
1<\/div>\r\n????????
2<\/div>\r\n????????
3<\/div>\r\n????????
4<\/div>\r\n????<\/div>\r\n????\r\n????????
1<\/div>\r\n????????
2<\/div>\r\n????????
3<\/div>\r\n????????
4<\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
執(zhí)行的效果如下：<\/p>\n
$\"彈性盒模型$ <\/p>\n
必備名詞解釋<\/h2>\n
在使用彈性盒子模型之前，需要了解一些彈性盒模型的基礎概念名詞。<\/p>\n
main axis 主軸
cross axis 交叉軸\/側軸與主軸垂直
main start 主軸起點邊
main end 主軸終點邊
cross start 交叉軸起點邊
cross end 交叉軸終點邊<\/p>\n
$\"彈性盒模型$ <\/p>\n

為什么使用彈性盒子模型<\/h2>\n
彈性盒子模型在開發(fā)手機端的時候使用頻率較高，在微信小程序開發(fā)的時候也是使用頻率非常高的技術，可以通過幾個實例來看一下彈性盒子的好處：<\/p>\n
實例1：<\/p>\n
\r\n\r\n\r\n????\r\n????Document<\/title>\r\n????<style>\r\n????????#item-container?{\r\n????????????display:?flex;\/*啟用flex布局*\/\r\n????????????background-color:?pink;\r\n????????}\r\n????????.square?{\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background-color:?orange;\r\n????????}\r\n????????.circle?{\r\n????????????border-radius:?50%;\r\n????????????width:?150px;\r\n????????????height:?150px;\r\n????????????background-color:?green;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\r\n????<div id=\"item-container\">\r\n????????<div class=\"circle\"><\/div>\r\n????????<div class=\"square\"><\/div>\r\n????????<div class=\"circle\"><\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>代碼結果如下：<\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/9a5798bb333f2bfd117c7746db9e6f72-2.jpg\" alt=\"彈性盒模型 flex box的認知與使用\" ><\/p>\n<p>在上述實例中需要注意的點：<br>① 啟用flex布局 display:flex<br>② 父元素的子元素在父元素設置了display:flex之后，子元素會自動的變?yōu)閺椥院凶拥淖釉兀?br>被稱為flex items<br>③ 默認情況，所有的 flex-item 會按照 flex 容器的頂部和左側對齊。<\/p>\n<p>實例2：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>Document<\/title>\r\n????<style>\r\n????????#item-container?{\r\n????????????display:?flex;\/*啟用flex布局*\/\r\n????????????background-color:?pink;\r\n????????????justify-content:flex-start;\/*默認*\/\r\n????????????justify-content:flex-end;\/*在主軸的末端對其*\/\r\n????????????justify-content:center;\/*在主軸的中間對其*\/\r\n????????????justify-content:space-between;\/*在整個主軸中平均分配空間，無論其中有多少個元素*\/\r\n????????????justify-content:space-around;\/*Flex-item?默認會被均勻的分布，但是每一個\r\n????????????????????????????????????????都會在其給定的空間內居中顯示。*\/\r\n????????????align-items:center;\/*讓items在垂直方向上居中*\/\r\n????????}\r\n????????.square?{\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background-color:?orange;\r\n????????}\r\n????????.circle?{\r\n????????????border-radius:?50%;\r\n????????????width:?150px;\r\n????????????height:?150px;\r\n????????????background-color:?green;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<div id=\"item-container\">\r\n????????<div class=\"circle\"><\/div>\r\n????????<div class=\"square\"><\/div>\r\n????????<div class=\"circle\"><\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>代碼效果如下：<\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/30bad17835237ef9da409b6f01599a7b-3.jpg\" alt=\"彈性盒模型 flex box的認知與使用\" ><\/p>\n<p>我們可以通過非常簡單的屬性設置來調整對其方式，例如：<br>justify-content: flex-start \/ flex-end \/center \/space-between \/space-around<br>我們也可以通過align-items:center 屬性讓 items 在垂直方向居中。<\/p>\n<p>實例3：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>Document<\/title>\r\n????<style>\r\n????????#item-container?{\r\n????????????display:?flex;\/*啟用flex布局*\/\r\n????????????background-color:?pink;\r\n????????????justify-content:flex-start;\/*默認*\/\r\n????????????justify-content:flex-end;\/*在主軸的末端對其*\/\r\n????????????justify-content:center;\/*在主軸的中間對其*\/\r\n????????????justify-content:space-between;\/*在整個主軸中平均分配空間，無論其中有多少個元素*\/\r\n????????????justify-content:space-around;\/*Flex-item?默認會被均勻的分布，但是每一個\r\n????????????????????????????????????????都會在其給定的空間內居中顯示。*\/\r\n????????????align-items:center;\/*讓items在垂直方向上居中*\/\r\n????????}\r\n????????.square?{\r\n????????????width:?200px;\r\n????????????height:?200px;\r\n????????????background-color:?orange;\r\n????????????order:?-1;?\/*讓正方形顯示在第一位而不是中間*\/\r\n????????}\r\n????????.circle?{\r\n????????????border-radius:?50%;\r\n????????????width:?150px;\r\n????????????height:?150px;\r\n????????????background-color:?green;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<div id=\"item-container\">\r\n????????<div class=\"circle\"><\/div>\r\n????????<div class=\"square\"><\/div>\r\n????????<div class=\"circle\"><\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>實例3 和 實例2 大體相似，但是在.square類里存在一句order:-1，可以更改元素的渲染順序。這個是彈性盒模型中一個非常厲害的一個方面。<\/p>\n<p>實例3代碼效果如下：<\/p>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/001\/8ff62a31c3639770e3cd84ee1a762f87-4.jpg\" alt=\"彈性盒模型 flex box的認知與使用\" ><\/p>\n<h2>flex布局方式屬性<\/h2>\n<p>在flex整個體系當中，大體上可以分為兩類，一類是給父容器設置的屬性，一類是給父容器中子元素設置的屬性。<\/p>\n<h3>彈性容器屬性 -- 給父元素設置的屬性<\/h3>\n<p>1.flex-direction 定義內部元素如何在flex容器中布局，定義了主軸的方向(是正是反)。<\/p>\n<p>語法：<\/p>\n<blockquote><p>row | row-reverse | column | column-reverse<br>row 默認值，子元素會排列在一行 從主軸左側開始<br>row-reverse 子元素會排列在一行。不過是從右側開始<br>column 子元素垂直顯示，從側軸起始點開始<br>column-reverse 垂直顯示，不過從結束點開始<\/p><\/blockquote>\n<p>實例代碼：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>Document<\/title>\r\n????<style>\r\n????????.container?{\r\n????????????width:?100%;\r\n????????????height:?500px;\r\n????????????border:1px?solid?#ccc;\r\n????????????display:flex;\r\n????????????flex-direction:?row-reverse;\r\n????????????flex-direction:?column;\r\n????????????flex-direction:?column-reverse;\r\n????????}\r\n????????.container?div?{\r\n????????????width:?100px;\r\n????????????height:?100px;\r\n????????????background-color:?orange;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<div class=\"container\">\r\n????????<div>1<\/div>\r\n????????<div>2<\/div>\r\n????????<div>3<\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>2.flex-wrap 控制容器內的子元素是被強制放在一行中或者是被放在多個行上 。如果允許換行，這個屬性允許你控制行的堆疊方向。<\/p>\n<blockquote><p>語法：<br>nowrap | wrap | wrap-reverse<br>nowrap 所有的元素被擺在一行 默認值<br>wrap 當一行元素過多，則允許元素 換行<br>wrap-reverse 將側軸起點和終點顛倒<\/p><\/blockquote>\n<p>實例代碼：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Document<\/title>\r\n<style>\r\n????.container?{\r\n????????width:?600px;\r\n????????height:?500px;\r\n????????border:1px?solid?#ccc;\r\n????????display:flex;\r\n????????flex-wrap:wrap;\r\n????????flex-wrap:wrap-reverse;\r\n????}\r\n????.container?div?{\r\n????????width:?200px;\r\n????????height:?100px;\r\n????????background-color:?orange;\r\n????}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n????<div>1<\/div>\r\n????<div>2<\/div>\r\n????<div>3<\/div>\r\n????<div>4<\/div>\r\n????<div>5<\/div>\r\n????<div>6<\/div>\r\n????<div>7<\/div>\r\n????<div>8<\/div>\r\n????<div>9<\/div>\r\n????<div>10<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>3.justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間。<\/p>\n<blockquote><p>語法：<br>flex-start | flex-end | center | space-between | space-around<br>flex-start : 從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊。默認<br>flex-end : 從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊<br>center : 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同<br>space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首 對齊，每行最后一個元素與行尾對齊。<br>space-around : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。<\/p><\/blockquote>\n<p>實例代碼:<\/p>\n<p>參考上面的實例2.<\/p>\n<p>4.align-items 屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊。<\/p>\n<blockquote><p>語法：<br>flex-start | flex-end | center | baseline | stretch<br>align-items: flex-start; 對齊到側軸起點<br>align-items: flex-end; 對齊到側軸終點<br>align-items: center; 在側軸上居中<br>align-items: baseline; 與基準線對齊<br>align-items: stretch; 拉伸元素以適應 默認值<\/p><\/blockquote>\n<p>實例代碼:<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Document<\/title>\r\n<style>\r\n????#item-container?{\r\n????????display:?flex;\/*啟用flex布局*\/\r\n????????background-color:?pink;\r\n????????justify-content:space-around;\r\n????????align-items:baseline;\/*與基準線對齊*\/\r\n????}\r\n????.square?{\r\n????????width:?200px;\r\n????????height:?200px;\r\n????????background-color:?orange;\r\n????}\r\n????.circle?{\r\n????????border-radius:?50%;\r\n????????width:?150px;\r\n????????height:?150px;\r\n????????background-color:?green;\r\n????}\r\n????.container?{\r\n????????width:?500px;\r\n????????height:?600px;\r\n????????border:1px?solid?#ccc;\r\n????????display:flex;\r\n????????align-items:?stretch;\r\n????}\r\n????.container?div?{\r\n????????width:?100px;\r\n????????background-color:red;\r\n????????border:1px?solid?green;\r\n????}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"item-container\">\r\n????<div class=\"circle\"><\/div>\r\n????<div class=\"square\"><\/div>\r\n????<div class=\"circle\"><\/div>\r\n<\/div>\r\n<!--?<div class=\"container\">\r\n????<div>1<\/div>\r\n????<div>2<\/div>\r\n<\/div>?-->\r\n<\/body>\r\n<\/html><\/pre>\n<p>5.align-content 多行對其方式，如果只有一行，則失效。<\/p>\n<blockquote><p>語法：<br>flex-start | flex-end | center | space-between | space-around | stretch<br>flex-start : 與交叉軸的起點對其<br>flex-end : 與交叉軸的終點對其<br>center : 與交叉軸的中點對其<br>space-between : 與交叉軸兩端對其，軸線之間的間隔平均分布<br>space-around: 所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的距離是相鄰兩行間距的一半。<br>stretch ：拉伸所有行來填滿剩余空間。剩余空間平均的分配給每一行<\/p><\/blockquote>\n<p>實例代碼：<\/p>\n<pre><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n????<meta charset=\"UTF-8\">\r\n????<title>Document<\/title>\r\n????<style>\r\n????????.container?{\r\n????????????width:?600px;\r\n????????????height:?900px;\r\n????????????border:1px?solid?#ccc;\r\n????????????display:flex;\r\n????????????flex-wrap:wrap;\r\n????????????align-content:flex-start;\r\n????????????align-content:flex-end;\r\n????????????align-content:center;\r\n????????????align-content:space-between;\r\n????????????align-content:space-around;\r\n????????????align-content:stretch;?\/*默認*\/\r\n????????}\r\n????????.container?div?{\r\n????????????width:?200px;\r\n????????????height:?80px;\r\n????????????background-color:?orange;\r\n????????}\r\n????<\/style>\r\n<\/head>\r\n<body>\r\n????<div class=\"container\">\r\n????????<div>1<\/div>\r\n????????<div>2<\/div>\r\n????????<div>3<\/div>\r\n????????<div>4<\/div>\r\n????????<div>5<\/div>\r\n????????<div>6<\/div>\r\n????????<div>7<\/div>\r\n????????<div>8<\/div>\r\n????????<div>9<\/div>\r\n????????<div>10<\/div>\r\n????<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<h3>彈性元素屬性 -- 給子元素設置的屬性<\/h3>\n<p>order order屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照order屬性的值的增序進行布局。擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行布局。<\/p>\n<blockquote><p>語法：<br>order:<\/p><\/blockquote>\n<p>align-self 定義flex子項單獨在側軸（縱軸）方向上的對齊方式<\/p>\n<blockquote><p>語法：<br>stretch|center|flex-start|flex-end|baseline<\/p><\/blockquote>\n<ul class=\" list-paddingleft-2\"><li><p><br><\/p><\/li><\/ul>\n<p>flex-grow 定義彈性盒子元素擴展比率<br>flex-shrink 定義彈性盒子元素的收縮比率<br>flex-basis 指定了flex item在主軸方向上的初始大小。如果不使用box-sizing來<br>改變盒模型的話，那么這個屬性就決定了flex item的內容盒content-box）的寬 或者高（取決于主軸的方向）的尺寸大小。<\/p>\n<p>Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三個屬性最好相互搭配使用。<\/p>\n<p>實例：<\/p>\n<pre><!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<style>\r\n#main?{\r\n????width:?350px;\r\n????height:?100px;\r\n????border:?1px?solid?#c3c3c3;\r\n????display:?flex;\r\n}\r\n\r\n#main?div?{\r\n????flex-grow:?1;\r\n????flex-shrink:?1;\r\n????flex-basis:?100px;\r\n}\r\n\r\n#main?div:nth-of-type(2)?{\r\n????flex-shrink:?3;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"main\">\r\n??<div style=\"background-color:coral;\"><\/div>\r\n??<div style=\"background-color:lightblue;\"><\/div>\r\n??<div style=\"background-color:khaki;\"><\/div>\r\n??<div style=\"background-color:pink;\"><\/div>\r\n??<div style=\"background-color:lightgrey;\"><\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<p>ok，上面大概就是一些常用的彈性盒子模型flex-box常用的屬性，上面的實例很多只是給了代碼，沒有給效果圖，是因為希望正在學習彈性盒子模型的同志們最好把代碼實際的敲一下，并且親自嘗試不同的屬性值，來分析不同屬性帶來的不同的效果。<br>彈性盒子模型難度不大，但是卻與傳統(tǒng)的布局方案有很大的差別。<\/p>"}	</script>
	
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>

<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
	<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
    <div   id="377j5v51b"   class="head">
        <div   id="377j5v51b"   class="haed_left">
            <div   id="377j5v51b"   class="haed_logo">
                <a href="http://www.miracleart.cn/zh/" title="" class="haed_logo_a">
                    <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                </a>
            </div>
            <div   id="377j5v51b"   class="head_nav">
                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="社區(qū)" class="head_nava head_nava-template1">社區(qū)</a>
                    <div   class="377j5v51b"   id="dropdown-template1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh/article.html" title="文章" class="languagechoosea on">文章</a>
                            <a href="http://www.miracleart.cn/zh/faq/zt" title="合集" class="languagechoosea">合集</a>
                            <a href="http://www.miracleart.cn/zh/wenda.html" title="問答" class="languagechoosea">問答</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="學習" class="head_nava head_nava-template1_1">學習</a>
                    <div   class="377j5v51b"   id="dropdown-template1_1" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh/course.html" title="課程" class="languagechoosea on">課程</a>
                            <a href="http://www.miracleart.cn/zh/dic/" title="編程詞典" class="languagechoosea">編程詞典</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="工具庫" class="head_nava head_nava-template1_2">工具庫</a>
                    <div   class="377j5v51b"   id="dropdown-template1_2" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh/toolset/development-tools" title="開發(fā)工具" class="languagechoosea on">開發(fā)工具</a>
                            <a href="http://www.miracleart.cn/zh/toolset/website-source-code" title="網站源碼" class="languagechoosea">網站源碼</a>
                            <a href="http://www.miracleart.cn/zh/toolset/php-libraries" title="PHP 庫" class="languagechoosea">PHP 庫</a>
                            <a href="http://www.miracleart.cn/zh/toolset/js-special-effects" title="JS特效" class="languagechoosea on">JS特效</a>
                            <a href="http://www.miracleart.cn/zh/toolset/website-materials" title="網站素材" class="languagechoosea on">網站素材</a>
                            <a href="http://www.miracleart.cn/zh/toolset/extension-plug-ins" title="擴展插件" class="languagechoosea on">擴展插件</a>
                        </div>
                    </div>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="http://www.miracleart.cn/zh/ai" title="AI工具" class="head_nava head_nava-template1_3">AI工具</a>
                </div>

                <div   id="377j5v51b"   class="head_navs">
                    <a href="javascript:;" title="休閑" class="head_nava head_nava-template1_3">休閑</a>
                    <div   class="377j5v51b"   id="dropdown-template1_3" style="display: none;">
                        <div   id="377j5v51b"   class="languagechoose">
                            <a href="http://www.miracleart.cn/zh/game" title="游戲下載" class="languagechoosea on">游戲下載</a>
                            <a href="http://www.miracleart.cn/zh/mobile-game-tutorial/" title="游戲教程" class="languagechoosea">游戲教程</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div   id="377j5v51b"   class="head_search">
                <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('zh')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                <a href="javascript:;" title="搜索"  onclick="searchs('zh')"><img src="/static/imghw/find.png" alt="搜索"></a>
            </div>
                <div   id="377j5v51b"   class="head_right">
            <div   id="377j5v51b"   class="haed_language">
                <a href="javascript:;" class="layui-btn haed_language_btn">簡體中文<i class="layui-icon layui-icon-triangle-d"></i></a>
                <div   class="377j5v51b"   id="dropdown-template" style="display: none;">
                    <div   id="377j5v51b"   class="languagechoose">
                                                <a href="javascript:;" title="簡體中文" class="languagechoosea">簡體中文</a>
                                                <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
                                                <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
                                                <a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
                                                <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
                                                <a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                            </div>
                </div>
            </div>
            <span id="377j5v51b"    class="head_right_line"></span>
                            <div style="display: block;" id="login" class="haed_login ">
                    <a href="javascript:;"  title="Login" class="haed_logina ">Login</a>
                </div>
                <div style="display: block;" id="reg" class="head_signup login">
                    <a href="javascript:;"  title="singup" class="head_signupa">singup</a>
                </div>
            
        </div>
    </div>
</header>

	
	<main>
		<div   id="377j5v51b"   class="Article_Details_main">
			<div   id="377j5v51b"   class="Article_Details_main1">
							<div   id="377j5v51b"   class="Article_Details_main1L">
					<div   id="377j5v51b"   class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
						<div   id="377j5v51b"   class="Article_Details_main1L1">目錄</div>
						<div   id="377j5v51b"   class="Article_Details_main1L2" id="Article_Details_main1L2">
							<!-- 左側懸浮，文章定位標題1 id="Article_Details_main1L2s_1"-->
															<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性盒子模型" title="彈性盒子模型" >彈性盒子模型</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#布局方案" title="布局方案" >布局方案</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性盒模型flex布局介紹" title="彈性盒模型flex布局介紹" >彈性盒模型flex布局介紹</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性盒子模型認知" title="彈性盒子模型認知" >彈性盒子模型認知</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性盒子模型的使用" title="彈性盒子模型的使用" >彈性盒子模型的使用</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#必備名詞解釋" title="必備名詞解釋" >必備名詞解釋</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#為什么使用彈性盒子模型" title="為什么使用彈性盒子模型" >為什么使用彈性盒子模型</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#flex布局方式屬性" title="flex布局方式屬性" >flex布局方式屬性</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性容器屬性-給父元素設置的屬性" title="彈性容器屬性 -- 給父元素設置的屬性" >彈性容器屬性 -- 給父元素設置的屬性</a>
								</div>
																<div   id="377j5v51b"   class="Article_Details_main1L2s ">
									<a href="#彈性元素屬性-給子元素設置的屬性" title="彈性元素屬性 -- 給子元素設置的屬性" >彈性元素屬性 -- 給子元素設置的屬性</a>
								</div>
														</div>
					</div>
				</div>
							<div   id="377j5v51b"   class="Article_Details_main1M">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL1">
						<a href="http://www.miracleart.cn/zh/" title="首頁"
							class="phpgenera_Details_mainL1a">首頁</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://www.miracleart.cn/zh/web-designer.html"
							class="phpgenera_Details_mainL1a">web前端</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://www.miracleart.cn/zh/html5-tutorial.html"
							class="phpgenera_Details_mainL1a">H5教程</a>
						<img src="/static/imghw/top_right.png" alt="" />
						<span>彈性盒模型 flex box的認知與使用</span>
					</div>
					
					<div   id="377j5v51b"   class="Articlelist_txts">
						<div   id="377j5v51b"   class="Articlelist_txts_info">
							<h1 class="Articlelist_txts_title">彈性盒模型 flex box的認知與使用</h1>
							<div   id="377j5v51b"   class="Articlelist_txts_info_head">
								<div   id="377j5v51b"   class="author_info">
									<a href="http://www.miracleart.cn/zh/member/1.html"  class="author_avatar">
									<img class="lazy"  data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" src="/static/imghw/default1.png" alt="PHP中文網">
									</a>
									<div   id="377j5v51b"   class="author_detail">
																			<a href="http://www.miracleart.cn/zh/member/1.html" class="author_name">PHP中文網</a>
                                										</div>
								</div>
                			</div>
							<span id="377j5v51b"    class="Articlelist_txts_time">Jun 21, 2017 pm	 03:48 PM</span>
															<div   id="377j5v51b"   class="Articlelist_txts_infos">
																			<span id="377j5v51b"    class="Articlelist_txts_infoss on">flex</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">彈性</span>
																			<span id="377j5v51b"    class="Articlelist_txts_infoss ">模型</span>
																	</div>
														
						</div>
					</div>
					<hr />
					<div   id="377j5v51b"   class="article_main php-article">
						<div   id="377j5v51b"   class="article-list-left detail-content-wrap content">
						<ins class="adsbygoogle"
							style="display:block; text-align:center;"
							data-ad-layout="in-article"
							data-ad-format="fluid"
							data-ad-client="ca-pub-5902227090019525"
							data-ad-slot="3461856641">
						</ins>
						

					<h1 id="彈性盒子模型">彈性盒子模型</h1>
<h2 id="布局方案">布局方案</h2>
<p>傳統(tǒng)的布局方案大多采用div+css+float+position+display來實現，但是隨著css3中彈性盒子模型的推出，在前端布局方案中就又多出了一項彪悍的選項。<br>而因為最近在研究小程序，發(fā)現中間使用彈性盒子布局效果更好效率更高一點，所以就將之前學習彈性盒模型的相關知識點整理出來，給大家分享。</p>
<h2 id="彈性盒模型flex布局介紹">彈性盒模型flex布局介紹</h2>
<p>彈性盒模型(flexbox)又稱為彈性布局，是css3中新提出的一種布局方式，通過彈性布局，可以讓子元素自動調整寬度和高度，從而達到很好的填充任何不同屏幕大小的顯示設備的顯示空間。<br>彈性盒模型與之前的布局方式是完全不同的兩種，雖然依然采用div+css的方式，但是卻將之前使用的浮動給替換成了彈性布局。從而使頁面元素布局方式更加的簡單。<br>不同于我們后面所學習的網格系統(tǒng)，彈性布局更加適用于應用組件以及小比例布局。<br>在之前,flex經歷了三次迭代，每一次迭代都產生了不同的語法，目前我們學習遵循最終版本的語法。因為之前版本在使用的時候需要考慮兼容問題，而最新版本，所有的瀏覽器都支持無前綴的終極規(guī)范。</p>
<h2 id="彈性盒子模型認知">彈性盒子模型認知</h2>
<p>flex布局方式是一個完整的布局模塊，而不是只某個屬性。flex的布局主要依靠父容器和元素組成。<br>父容器稱之為flex container(flex容器) 而其子元素稱之為flex item(flex元素)。<br>而整個flex布局的核心在于 對其方式、排布和順序。</p>
<h2 id="彈性盒子模型的使用">彈性盒子模型的使用</h2>
<p>想要使用flex布局，首先要使用display:flex 或者 display:inline-flex來設置父容器。<br>display:flex 給父元素設置完成后，那么整個父元素會變成彈性容器，但是是一個塊級元素。<br>display:inline-flex給父元素設置完成后，那么整個父元素會變成彈性容器，但是是一個行內塊級元素，有些類似于inline-block的效果。</p>
<p>當父容器設置了這個屬性之后，里面的子元素默認的全部變成flex item (flex元素)<br>Tip:flex布局與我們之前所學習的布局方式是屬于另外一套布局方案，所以在使用了flex布局之后，如Block”，“inline”，“float” 和 “text-align” 等一些屬性會失效。</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????.container-flex?{
????????????width:?600px;
????????????border:1px?solid?#ccc;
????????????display:flex;
????????}
????????.container-inline?{
????????????width:?600px;
????????????border:1px?solid?#ccc;
????????????display:inline-flex;
????????}
????????.container-flex?div?{
????????????width:?200px;
????????????height:?200px;
????????????background-color:?orange;
????????}
????????.container-inline?div?{
????????????width:?200px;
????????????height:?200px;
????????????background-color:?orange;
????????}
????</style>
</head>
<body>
????<div class="container-flex">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????????<div>4</div>
????</div>
????<div class="container-flex">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????????<div>4</div>
????</div>
????<div class="container-inline">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????????<div>4</div>
????</div>
????<div class="container-inline">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????????<div>4</div>
????</div>
</body>
</html></pre>
<p>執(zhí)行的效果如下：</p>
<p><img  src="/static/imghw/default1.png" data-src="http://i.imgur.com/VNfT1GN.jpg" class="lazy" alt="彈性盒模型 flex box的認知與使用" ></p>
<h2 id="必備名詞解釋">必備名詞解釋</h2>
<p>在使用彈性盒子模型之前，需要了解一些彈性盒模型的基礎概念名詞。</p>
<p>main axis 主軸<br>cross axis 交叉軸/側軸 與主軸垂直<br>main start 主軸起點邊<br>main end 主軸終點邊<br>cross start 交叉軸起點邊<br>cross end 交叉軸終點邊</p>
<p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/2f0c608fcb31512b3692f0f8246863c0-1.png" class="lazy" alt="彈性盒模型 flex box的認知與使用" ></p>
<h2 id="為什么使用彈性盒子模型">為什么使用彈性盒子模型</h2>
<p>彈性盒子模型在開發(fā)手機端的時候使用頻率較高，在微信小程序開發(fā)的時候也是使用頻率非常高的技術，可以通過幾個實例來看一下彈性盒子的好處：</p>
<p>實例1：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????#item-container?{
????????????display:?flex;/*啟用flex布局*/
????????????background-color:?pink;
????????}
????????.square?{
????????????width:?200px;
????????????height:?200px;
????????????background-color:?orange;
????????}
????????.circle?{
????????????border-radius:?50%;
????????????width:?150px;
????????????height:?150px;
????????????background-color:?green;
????????}
????</style>
</head>
<body>
????<div id="item-container">
????????<div class="circle"></div>
????????<div class="square"></div>
????????<div class="circle"></div>
????</div>
</body>
</html></pre>
<p>代碼結果如下：</p>
<p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/9a5798bb333f2bfd117c7746db9e6f72-2.jpg" class="lazy" alt="彈性盒模型 flex box的認知與使用" ></p>
<p>在上述實例中需要注意的點：<br>① 啟用flex布局 display:flex<br>② 父元素的子元素在父元素設置了display:flex之后，子元素會自動的變?yōu)閺椥院凶拥淖釉兀?br>被稱為flex items<br>③ 默認情況，所有的 flex-item 會按照 flex 容器的頂部和左側對齊。</p>
<p>實例2：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????#item-container?{
????????????display:?flex;/*啟用flex布局*/
????????????background-color:?pink;
????????????justify-content:flex-start;/*默認*/
????????????justify-content:flex-end;/*在主軸的末端對其*/
????????????justify-content:center;/*在主軸的中間對其*/
????????????justify-content:space-between;/*在整個主軸中平均分配空間，無論其中有多少個元素*/
????????????justify-content:space-around;/*Flex-item?默認會被均勻的分布，但是每一個
????????????????????????????????????????都會在其給定的空間內居中顯示。*/
????????????align-items:center;/*讓items在垂直方向上居中*/
????????}
????????.square?{
????????????width:?200px;
????????????height:?200px;
????????????background-color:?orange;
????????}
????????.circle?{
????????????border-radius:?50%;
????????????width:?150px;
????????????height:?150px;
????????????background-color:?green;
????????}
????</style>
</head>
<body>
????<div id="item-container">
????????<div class="circle"></div>
????????<div class="square"></div>
????????<div class="circle"></div>
????</div>
</body>
</html></pre>
<p>代碼效果如下：</p>
<p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/30bad17835237ef9da409b6f01599a7b-3.jpg" class="lazy" alt="彈性盒模型 flex box的認知與使用" ></p>
<p>我們可以通過非常簡單的屬性設置來調整對其方式，例如：<br>justify-content: flex-start / flex-end /center /space-between /space-around<br>我們也可以通過align-items:center 屬性讓 items 在垂直方向居中。</p>
<p>實例3：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????#item-container?{
????????????display:?flex;/*啟用flex布局*/
????????????background-color:?pink;
????????????justify-content:flex-start;/*默認*/
????????????justify-content:flex-end;/*在主軸的末端對其*/
????????????justify-content:center;/*在主軸的中間對其*/
????????????justify-content:space-between;/*在整個主軸中平均分配空間，無論其中有多少個元素*/
????????????justify-content:space-around;/*Flex-item?默認會被均勻的分布，但是每一個
????????????????????????????????????????都會在其給定的空間內居中顯示。*/
????????????align-items:center;/*讓items在垂直方向上居中*/
????????}
????????.square?{
????????????width:?200px;
????????????height:?200px;
????????????background-color:?orange;
????????????order:?-1;?/*讓正方形顯示在第一位而不是中間*/
????????}
????????.circle?{
????????????border-radius:?50%;
????????????width:?150px;
????????????height:?150px;
????????????background-color:?green;
????????}
????</style>
</head>
<body>
????<div id="item-container">
????????<div class="circle"></div>
????????<div class="square"></div>
????????<div class="circle"></div>
????</div>
</body>
</html></pre>
<p>實例3 和 實例2 大體相似，但是在.square類里存在一句order:-1，可以更改元素的渲染順序。這個是彈性盒模型中一個非常厲害的一個方面。</p>
<p>實例3代碼效果如下：</p>
<p><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8ff62a31c3639770e3cd84ee1a762f87-4.jpg" class="lazy" alt="彈性盒模型 flex box的認知與使用" ></p>
<h2 id="flex布局方式屬性">flex布局方式屬性</h2>
<p>在flex整個體系當中，大體上可以分為兩類，一類是給父容器設置的屬性，一類是給父容器中子元素設置的屬性。</p>
<h3 id="彈性容器屬性-給父元素設置的屬性">彈性容器屬性 -- 給父元素設置的屬性</h3>
<p>1.flex-direction 定義內部元素如何在flex容器中布局，定義了主軸的方向(是正是反)。</p>
<p>語法：</p>
<blockquote><p>row | row-reverse | column | column-reverse<br>row 默認值，子元素會排列在一行 從主軸左側開始<br>row-reverse 子元素會排列在一行。不過是從右側開始<br>column 子元素垂直顯示，從側軸起始點開始<br>column-reverse 垂直顯示，不過從結束點開始</p></blockquote>
<p>實例代碼：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????.container?{
????????????width:?100%;
????????????height:?500px;
????????????border:1px?solid?#ccc;
????????????display:flex;
????????????flex-direction:?row-reverse;
????????????flex-direction:?column;
????????????flex-direction:?column-reverse;
????????}
????????.container?div?{
????????????width:?100px;
????????????height:?100px;
????????????background-color:?orange;
????????}
????</style>
</head>
<body>
????<div class="container">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????</div>
</body>
</html></pre>
<p>2.flex-wrap 控制容器內的子元素是被強制放在一行中或者是被放在多個行上 。如果允許換行，這個屬性允許你控制行的堆疊方向。</p>
<blockquote><p>語法：<br>nowrap | wrap | wrap-reverse<br>nowrap 所有的元素被擺在一行 默認值<br>wrap 當一行元素過多，則允許元素 換行<br>wrap-reverse 將側軸起點和終點顛倒</p></blockquote>
<p>實例代碼：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
????.container?{
????????width:?600px;
????????height:?500px;
????????border:1px?solid?#ccc;
????????display:flex;
????????flex-wrap:wrap;
????????flex-wrap:wrap-reverse;
????}
????.container?div?{
????????width:?200px;
????????height:?100px;
????????background-color:?orange;
????}
</style>
</head>
<body>
<div class="container">
????<div>1</div>
????<div>2</div>
????<div>3</div>
????<div>4</div>
????<div>5</div>
????<div>6</div>
????<div>7</div>
????<div>8</div>
????<div>9</div>
????<div>10</div>
</div>
</body>
</html></pre>
<p>3.justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間。</p>
<blockquote><p>語法：<br>flex-start | flex-end | center | space-between | space-around<br>flex-start : 從行首開始排列。每行第一個彈性元素與行首對齊，同時所有后續(xù)的彈性元素與前一個對齊。默認<br>flex-end : 從行尾開始排列。每行最后一個彈性元素與行尾對齊，其他元素將與后一個對齊<br>center : 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最后一個元素到行尾的距離相同<br>space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首 對齊，每行最后一個元素與行尾對齊。<br>space-around : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。</p></blockquote>
<p>實例代碼:</p>
<p>參考上面的實例2.</p>
<p>4.align-items 屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊。</p>
<blockquote><p>語法：<br>flex-start | flex-end | center | baseline | stretch<br>align-items: flex-start; 對齊到側軸起點<br>align-items: flex-end; 對齊到側軸終點<br>align-items: center; 在側軸上居中<br>align-items: baseline; 與基準線對齊<br>align-items: stretch; 拉伸元素以適應 默認值</p></blockquote>
<p>實例代碼:</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
????#item-container?{
????????display:?flex;/*啟用flex布局*/
????????background-color:?pink;
????????justify-content:space-around;
????????align-items:baseline;/*與基準線對齊*/
????}
????.square?{
????????width:?200px;
????????height:?200px;
????????background-color:?orange;
????}
????.circle?{
????????border-radius:?50%;
????????width:?150px;
????????height:?150px;
????????background-color:?green;
????}
????.container?{
????????width:?500px;
????????height:?600px;
????????border:1px?solid?#ccc;
????????display:flex;
????????align-items:?stretch;
????}
????.container?div?{
????????width:?100px;
????????background-color:red;
????????border:1px?solid?green;
????}
</style>
</head>
<body>
<div id="item-container">
????<div class="circle"></div>
????<div class="square"></div>
????<div class="circle"></div>
</div>
<!--?<div class="container">
????<div>1</div>
????<div>2</div>
</div>?-->
</body>
</html></pre>
<p>5.align-content 多行對其方式，如果只有一行，則失效。</p>
<blockquote><p>語法：<br>flex-start | flex-end | center | space-between | space-around | stretch<br>flex-start : 與交叉軸的起點對其<br>flex-end : 與交叉軸的終點對其<br>center : 與交叉軸的中點對其<br>space-between : 與交叉軸兩端對其，軸線之間的間隔平均分布<br>space-around: 所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點邊和終點邊分別與第一行和最后一行的距離是相鄰兩行間距的一半。<br>stretch ：拉伸所有行來填滿剩余空間。剩余空間平均的分配給每一行</p></blockquote>
<p>實例代碼：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Document</title>
????<style>
????????.container?{
????????????width:?600px;
????????????height:?900px;
????????????border:1px?solid?#ccc;
????????????display:flex;
????????????flex-wrap:wrap;
????????????align-content:flex-start;
????????????align-content:flex-end;
????????????align-content:center;
????????????align-content:space-between;
????????????align-content:space-around;
????????????align-content:stretch;?/*默認*/
????????}
????????.container?div?{
????????????width:?200px;
????????????height:?80px;
????????????background-color:?orange;
????????}
????</style>
</head>
<body>
????<div class="container">
????????<div>1</div>
????????<div>2</div>
????????<div>3</div>
????????<div>4</div>
????????<div>5</div>
????????<div>6</div>
????????<div>7</div>
????????<div>8</div>
????????<div>9</div>
????????<div>10</div>
????</div>
</body>
</html></pre>
<h3 id="彈性元素屬性-給子元素設置的屬性">彈性元素屬性 -- 給子元素設置的屬性</h3>
<p>order order屬性規(guī)定了彈性容器中的可伸縮項目在布局時的順序。元素按照order屬性的值的增序進行布局。擁有相同order屬性值的元素按照它們在源代碼中出現的順序進行布局。</p>
<blockquote><p>語法：<br>order:</p></blockquote>
<p>align-self 定義flex子項單獨在側軸（縱軸）方向上的對齊方式</p>
<blockquote><p>語法：<br>stretch|center|flex-start|flex-end|baseline</p></blockquote>
<ul class=" list-paddingleft-2"><li><p><br></p></li></ul>
<p>flex-grow 定義彈性盒子元素擴展比率<br>flex-shrink 定義彈性盒子元素的收縮比率<br>flex-basis 指定了flex item在主軸方向上的初始大小。如果不使用box-sizing來<br>改變盒模型的話，那么這個屬性就決定了flex item的內容盒content-box）的寬 或者高（取決于主軸的方向）的尺寸大小。</p>
<p>Tip:需要注意的是，在上面的最后的flex-grow、flex-shrink、flex-basis 三個屬性最好相互搭配使用。</p>
<p>實例：</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main?{
????width:?350px;
????height:?100px;
????border:?1px?solid?#c3c3c3;
????display:?flex;
}

#main?div?{
????flex-grow:?1;
????flex-shrink:?1;
????flex-basis:?100px;
}

#main?div:nth-of-type(2)?{
????flex-shrink:?3;
}
</style>
</head>
<body>

<div id="main">
??<div style="background-color:coral;"></div>
??<div style="background-color:lightblue;"></div>
??<div style="background-color:khaki;"></div>
??<div style="background-color:pink;"></div>
??<div style="background-color:lightgrey;"></div>
</div>
</body>
</html></pre>
<p>ok，上面大概就是一些常用的彈性盒子模型flex-box常用的屬性，上面的實例很多只是給了代碼，沒有給效果圖，是因為希望正在學習彈性盒子模型的同志們最好把代碼實際的敲一下，并且親自嘗試不同的屬性值，來分析不同屬性帶來的不同的效果。<br>彈性盒子模型難度不大，但是卻與傳統(tǒng)的布局方案有很大的差別。</p><p>以上是彈性盒模型 flex box的認知與使用的詳細內容。更多信息請關注PHP中文網其他相關文章！</p>


						</div>
					</div>
					<div   id="377j5v51b"   class="wzconShengming_sp">
						<div   id="377j5v51b"   class="bzsmdiv_sp">本站聲明</div>
						<div>本文內容由網友自發(fā)貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發(fā)現有涉嫌抄襲侵權的內容，請聯(lián)系admin@php.cn</div>
					</div>
				</div>

				<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>



				<div   id="377j5v51b"   class="AI_ToolDetails_main4sR">


				<ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    


					<!-- <div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796833110.html" title="<??>：在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林里99夜 - 所有徽章以及如何解鎖</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796831605.html" title="烏瑪的粉絲漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪的粉絲漂亮的德比橫幅日程（2025年7月）</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By 下次還敢</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh/article.html">顯示更多</a>
							</div>
						</div>
					</div> -->


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱AI工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>免費脫衣服圖片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>用于從照片中去除衣服的在線人工智能工具。</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>AI脫衣機</p>
											</div>
										</div>
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！</p>
											</div>
										</div>
																</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://www.miracleart.cn/zh/ai">顯示更多</a>
								</div>
							</div>
						</div>
					


					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門文章</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796832397.html" title="Grass Wonder Build Guide |烏瑪媽媽漂亮的德比" class="phpgenera_Details_mainR4_bottom_title">Grass Wonder Build Guide |烏瑪媽媽漂亮的德比</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796833110.html" title="<??>：在森林里99夜 - 所有徽章以及如何解鎖" class="phpgenera_Details_mainR4_bottom_title"><??>：在森林里99夜 - 所有徽章以及如何解鎖</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 周前</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796831605.html" title="烏瑪的粉絲漂亮的德比橫幅日程（2025年7月）" class="phpgenera_Details_mainR4_bottom_title">烏瑪的粉絲漂亮的德比橫幅日程（2025年7月）</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796836699.html" title="Rimworld Odyssey溫度指南和Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey溫度指南和Gravtech</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 周前</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/1796831905.html" title="Windows安全是空白或不顯示選項" class="phpgenera_Details_mainR4_bottom_title">Windows安全是空白或不顯示選項</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>1 個月前</span>
										<span>By 下次還敢</span>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh/article.html">顯示更多</a>
							</div>
						</div>
					</div>


											<div   id="377j5v51b"   class="phpgenera_Details_mainR3">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank">
								<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/hottools2.png" alt="" />
									<h2>熱工具</h2>
								</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="記事本++7.3.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title">
													<h3>記事本++7.3.1</h3>
												</a>
												<p>好用且免費的代碼編輯器</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3漢化版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3漢化版</h3>
												</a>
												<p>中文版，非常好用</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="禪工作室 13.0.1" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title">
													<h3>禪工作室 13.0.1</h3>
												</a>
												<p>功能強大的PHP集成開發(fā)環(huán)境</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>視覺化網頁開發(fā)工具</p>
											</div>
										</div>
																			<div   id="377j5v51b"   class="phpmain_tab2_mids_top">
											<a href="http://www.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img">
												<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
													class="lazy"  data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" />
											</a>
											<div   id="377j5v51b"   class="phpmain_tab2_mids_info">
												<a href="http://www.miracleart.cn/zh/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 Mac版</h3>
												</a>
												<p>神級代碼編輯軟件(SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
									<a href="http://www.miracleart.cn/zh/ai">顯示更多</a>
								</div>
							</div>
						</div>
										

					
					<div   id="377j5v51b"   class="phpgenera_Details_mainR4">
						<div   id="377j5v51b"   class="phpmain1_4R_readrank">
							<div   id="377j5v51b"   class="phpmain1_4R_readrank_top">
								<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
									src="/static/imghw/hotarticle2.png" alt="" />
								<h2>熱門話題</h2>
							</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottom">
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1601</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>29</span>
										</div>
									</div>
								</div>
															<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://www.miracleart.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a>
									<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1502</span>
										</div>
										<div   id="377j5v51b"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>276</span>
										</div>
									</div>
								</div>
														</div>
							<div   id="377j5v51b"   class="phpgenera_Details_mainR3_more">
								<a href="http://www.miracleart.cn/zh/faq/zt">顯示更多</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div   id="377j5v51b"   class="Article_Details_main2">
					<div   id="377j5v51b"   class="phpgenera_Details_mainL4">
						<div   id="377j5v51b"   class="phpmain1_2_top">
							<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
									src="/static/imghw/index2_title2.png" alt="" /></a>
						</div>
						<div   id="377j5v51b"   class="phpgenera_Details_mainL4_info">

													<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/741093.html" title="AI顛覆數學研究！菲爾茲獎得主、華裔數學家領銜11篇頂刊論文｜陶哲軒轉贊" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/171263473131375.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="AI顛覆數學研究！菲爾茲獎得主、華裔數學家領銜11篇頂刊論文｜陶哲軒轉贊" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/741093.html" title="AI顛覆數學研究！菲爾茲獎得主、華裔數學家領銜11篇頂刊論文｜陶哲軒轉贊" class="phphistorical_Version2_mids_title">AI顛覆數學研究！菲爾茲獎得主、華裔數學家領銜11篇頂刊論文｜陶哲軒轉贊</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Apr 09, 2024 am	 11:52 AM</span>
								<p class="Articlelist_txts_p">AI，的確正在改變數學。最近，一直十分關注這個議題的陶哲軒，轉發(fā)了最近一期的《美國數學學會通報》（BulletinoftheAmericanMathematicalSociety）。圍繞「機器會改變數學嗎？」這個話題，眾多數學家發(fā)表了自己的觀點，全程火花四射，內容硬核，精彩紛呈。作者陣容強大，包括菲爾茲獎得主AkshayVenkatesh、華裔數學家鄭樂雋、紐大計算機科學家ErnestDavis等多位業(yè)界知名學者。AI的世界已經發(fā)生了天翻地覆的變化，要知道，其中很多文章是在一年前提交的，而在這一</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/754766.html" title="你好，電動Atlas！波士頓動力機器人復活，180度詭異動作嚇壞馬斯克" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/171344151345539.gif?x-oss-process=image/resize,m_fill,h_207,w_330" alt="你好，電動Atlas！波士頓動力機器人復活，180度詭異動作嚇壞馬斯克" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/754766.html" title="你好，電動Atlas！波士頓動力機器人復活，180度詭異動作嚇壞馬斯克" class="phphistorical_Version2_mids_title">你好，電動Atlas！波士頓動力機器人復活，180度詭異動作嚇壞馬斯克</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Apr 18, 2024 pm	 07:58 PM</span>
								<p class="Articlelist_txts_p">波士頓動力Atlas，正式進入電動機器人時代！昨天，液壓Atlas剛剛「含淚」退出歷史舞臺，今天波士頓動力就宣布：電動Atlas上崗?？磥?，在商用人形機器人領域，波士頓動力是下定決心要和特斯拉硬剛一把了。新視頻放出后，短短十幾小時內，就已經有一百多萬觀看。舊人離去，新角色登場，這是歷史的必然。毫無疑問，今年是人形機器人的爆發(fā)年。網友銳評：機器人的進步，讓今年看起來像人類的開幕式動作、自由度遠超人類，但這真不是恐怖片？視頻一開始，Atlas平靜地躺在地上，看起來應該是仰面朝天。接下來，讓人驚掉下巴</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/779923.html" title="全球最強開源 MoE 模型來了，中文能力比肩 GPT-4，價格僅為 GPT-4-Turbo 的近百分之一" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/000/164/171506960411330.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="全球最強開源 MoE 模型來了，中文能力比肩 GPT-4，價格僅為 GPT-4-Turbo 的近百分之一" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/779923.html" title="全球最強開源 MoE 模型來了，中文能力比肩 GPT-4，價格僅為 GPT-4-Turbo 的近百分之一" class="phphistorical_Version2_mids_title">全球最強開源 MoE 模型來了，中文能力比肩 GPT-4，價格僅為 GPT-4-Turbo 的近百分之一</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">May 07, 2024 pm	 04:13 PM</span>
								<p class="Articlelist_txts_p">想象一下，一個人工智能模型，不僅擁有超越傳統(tǒng)計算的能力，還能以更低的成本實現更高效的性能。這不是科幻，DeepSeek-V2[1]，全球最強開源MoE模型來了。DeepSeek-V2是一個強大的專家混合（MoE）語言模型，具有訓練經濟、推理高效的特點。它由236B個參數組成，其中21B個參數用于激活每個標記。與DeepSeek67B相比，DeepSeek-V2性能更強，同時節(jié)省了42.5%的訓練成本，減少了93.3%的KV緩存，最大生成吞吐量提高到5.76倍。DeepSeek是一家探索通用人工智</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/717060.html" title="DualBEV：大幅超越BEVFormer、BEVDet4D，開卷！" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/000/164/171101287148933.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="DualBEV：大幅超越BEVFormer、BEVDet4D，開卷！" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/717060.html" title="DualBEV：大幅超越BEVFormer、BEVDet4D，開卷！" class="phphistorical_Version2_mids_title">DualBEV：大幅超越BEVFormer、BEVDet4D，開卷！</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Mar 21, 2024 pm	 05:21 PM</span>
								<p class="Articlelist_txts_p">這篇論文探討了在自動駕駛中，從不同視角（如透視圖和鳥瞰圖）準確檢測物體的問題，特別是如何有效地從透視圖（PV）到鳥瞰圖（BEV）空間轉換特征，這一轉換是通過視覺轉換（VT）模塊實施的?，F有的方法大致分為兩種策略：2D到3D和3D到2D轉換。2D到3D的方法通過預測深度概率來提升密集的2D特征，但深度預測的固有不確定性，尤其是在遠處區(qū)域，可能會引入不準確性。而3D到2D的方法通常使用3D查詢來采樣2D特征，并通過Transformer學習3D和2D特征之間對應關系的注意力權重，這增加了計算和部署的</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/731912.html" title="谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/171197197362109.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/731912.html" title="谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇" class="phphistorical_Version2_mids_title">谷歌狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Apr 01, 2024 pm	 07:46 PM</span>
								<p class="Articlelist_txts_p">谷歌力推的JAX在最近的基準測試中性能已經超過Pytorch和TensorFlow，7項指標排名第一。而且測試并不是在JAX性能表現最好的TPU上完成的。雖然現在在開發(fā)者中，Pytorch依然比Tensorflow更受歡迎。但未來，也許有更多的大模型會基于JAX平臺進行訓練和運行。模型最近，Keras團隊為三個后端（TensorFlow、JAX、PyTorch）與原生PyTorch實現以及搭配TensorFlow的Keras2進行了基準測試。首先，他們?yōu)樯墒胶头巧墒饺斯ぶ悄苋蝿者x擇了一組主流</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/778161.html" title="特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/171498318244035.gif?x-oss-process=image/resize,m_fill,h_207,w_330" alt="特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/778161.html" title="特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！" class="phphistorical_Version2_mids_title">特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">May 06, 2024 pm	 04:13 PM</span>
								<p class="Articlelist_txts_p">特斯拉機器人Optimus最新視頻出爐，已經可以在廠子里打工了。正常速度下，它分揀電池（特斯拉的4680電池）是這樣的：官方還放出了20倍速下的樣子——在小小的“工位”上，揀啊揀啊揀：這次放出的視頻亮點之一在于Optimus在廠子里完成這項工作，是完全自主的，全程沒有人為的干預。并且在Optimus的視角之下，它還可以把放歪了的電池重新?lián)炱饋矸胖?，主打一個自動糾錯：對于Optimus的手，英偉達科學家JimFan給出了高度的評價：Optimus的手是全球五指機器人里最靈巧的之一。它的手不僅有觸覺</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/1787682.html" title="替代MLP的KAN，被開源項目擴展到卷積了" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/465/014/171725062476660.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="替代MLP的KAN，被開源項目擴展到卷積了" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/1787682.html" title="替代MLP的KAN，被開源項目擴展到卷積了" class="phphistorical_Version2_mids_title">替代MLP的KAN，被開源項目擴展到卷積了</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Jun 01, 2024 pm	 10:03 PM</span>
								<p class="Articlelist_txts_p">本月初，來自MIT等機構的研究者提出了一種非常有潛力的MLP替代方法——KAN。KAN在準確性和可解釋性方面表現優(yōu)于MLP。而且它能以非常少的參數量勝過以更大參數量運行的MLP。比如，作者表示，他們用KAN以更小的網絡和更高的自動化程度重現了DeepMind的結果。具體來說，DeepMind的MLP有大約300,000個參數，而KAN只有約200個參數。KAN與MLP一樣具有強大的數學基礎，MLP基于通用逼近定理，而KAN基于Kolmogorov-Arnold表示定理。如下圖所示，KAN在邊上具</p>
							</div>
														<div   id="377j5v51b"   class="phphistorical_Version2_mids">
								<a href="http://www.miracleart.cn/zh/faq/748146.html" title="本地運行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務，太方便了！" class="phphistorical_Version2_mids_img">
									<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
										src="/static/imghw/default1.png" class="lazy"  data-src="https://img.php.cn/upload/article/000/887/227/171314286580429.png?x-oss-process=image/resize,m_fill,h_207,w_330" alt="本地運行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務，太方便了！" />
								</a>
								<a href="http://www.miracleart.cn/zh/faq/748146.html" title="本地運行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務，太方便了！" class="phphistorical_Version2_mids_title">本地運行性能超越 OpenAI Text-Embedding-Ada-002 的 Embedding 服務，太方便了！</a>
								<span id="377j5v51b"    class="Articlelist_txts_time">Apr 15, 2024 am	 09:01 AM</span>
								<p class="Articlelist_txts_p">Ollama是一款超級實用的工具，讓你能夠在本地輕松運行Llama2、Mistral、Gemma等開源模型。本文我將介紹如何使用Ollama實現對文本的向量化處理。如果你本地還沒有安裝Ollama，可以閱讀這篇文章。本文我們將使用nomic-embed-text[2]模型。它是一種文本編碼器，在短的上下文和長的上下文任務上，性能超越了OpenAItext-embedding-ada-002和text-embedding-3-small。啟動nomic-embed-text服務當你已經成功安裝好o</p>
							</div>
													</div>

													<a href="http://www.miracleart.cn/zh/web-designer.html" class="phpgenera_Details_mainL4_botton">
								<span>See all articles</span>
								<img src="/static/imghw/down_right.png" alt="" />
							</a>
											</div>
				</div>
					</div>
	</main>
	<footer>
    <div   id="377j5v51b"   class="footer">
        <div   id="377j5v51b"   class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>公益在線PHP培訓，幫助PHP學習者快速成長！</p>
        </div>
        <div   id="377j5v51b"   class="footermid">
            <a href="http://www.miracleart.cn/zh/about/us.html">關于我們</a>
            <a href="http://www.miracleart.cn/zh/about/disclaimer.html">免責聲明</a>
            <a href="http://www.miracleart.cn/zh/update/article_0_1.html">Sitemap</a>
        </div>
        <div   id="377j5v51b"   class="footerbottom">
            <p>
                ? php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">




		<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
	
	
	
	
	

	
	






<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>

<div class="friend-links">


</div>
</div>

</footer>


<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="jwat4" class="pl_css_ganrao" style="display: none;"><address id="jwat4"><table id="jwat4"><wbr id="jwat4"></wbr></table></address><option id="jwat4"></option><s id="jwat4"><b id="jwat4"></b></s><abbr id="jwat4"></abbr><xmp id="jwat4"><li id="jwat4"><xmp id="jwat4"></xmp></li></xmp><tbody id="jwat4"><meter id="jwat4"><th id="jwat4"></th></meter></tbody><abbr id="jwat4"></abbr><center id="jwat4"><optgroup id="jwat4"><blockquote id="jwat4"></blockquote></optgroup></center><address id="jwat4"><table id="jwat4"><wbr id="jwat4"></wbr></table></address><s id="jwat4"></s><samp id="jwat4"></samp><noframes id="jwat4"><rt id="jwat4"><small id="jwat4"></small></rt></noframes><center id="jwat4"><tbody id="jwat4"><big id="jwat4"></big></tbody></center><abbr id="jwat4"></abbr><samp id="jwat4"><pre id="jwat4"><samp id="jwat4"><strong id="jwat4"></strong></samp></pre></samp><td id="jwat4"></td><code id="jwat4"></code><ol id="jwat4"><option id="jwat4"></option></ol><em id="jwat4"></em><dl id="jwat4"><ruby id="jwat4"></ruby></dl><tbody id="jwat4"><abbr id="jwat4"><form id="jwat4"><dfn id="jwat4"></dfn></form></abbr></tbody><table id="jwat4"></table><blockquote id="jwat4"><style id="jwat4"><progress id="jwat4"><small id="jwat4"></small></progress></style></blockquote><pre id="jwat4"><menu id="jwat4"><small id="jwat4"></small></menu></pre><tr id="jwat4"><dfn id="jwat4"><span id="jwat4"></span></dfn></tr><dl id="jwat4"></dl><u id="jwat4"></u><center id="jwat4"><label id="jwat4"></label></center><li id="jwat4"><dl id="jwat4"><li id="jwat4"></li></dl></li><rt id="jwat4"><delect id="jwat4"><rt id="jwat4"></rt></delect></rt><del id="jwat4"><p id="jwat4"><kbd id="jwat4"></kbd></p></del><th id="jwat4"></th><address id="jwat4"><table id="jwat4"><xmp id="jwat4"></xmp></table></address><bdo id="jwat4"></bdo><tfoot id="jwat4"><track id="jwat4"></track></tfoot><meter id="jwat4"><th id="jwat4"></th></meter><acronym id="jwat4"></acronym><ol id="jwat4"></ol><track id="jwat4"></track><abbr id="jwat4"><fieldset id="jwat4"></fieldset></abbr><p id="jwat4"></p><b id="jwat4"></b><tfoot id="jwat4"><pre id="jwat4"><rt id="jwat4"></rt></pre></tfoot><rp id="jwat4"></rp><b id="jwat4"><pre id="jwat4"><samp id="jwat4"></samp></pre></b><nav id="jwat4"><center id="jwat4"><tbody id="jwat4"><big id="jwat4"></big></tbody></center></nav><input id="jwat4"></input><tbody id="jwat4"><meter id="jwat4"><button id="jwat4"></button></meter></tbody><strike id="jwat4"><th id="jwat4"><tbody id="jwat4"><abbr id="jwat4"></abbr></tbody></th></strike><wbr id="jwat4"></wbr><blockquote id="jwat4"></blockquote><dfn id="jwat4"></dfn><s id="jwat4"><b id="jwat4"><pre id="jwat4"><samp id="jwat4"></samp></pre></b></s><abbr id="jwat4"><tfoot id="jwat4"><nobr id="jwat4"></nobr></tfoot></abbr><kbd id="jwat4"></kbd><code id="jwat4"><tr id="jwat4"><dfn id="jwat4"></dfn></tr></code><center id="jwat4"></center><video id="jwat4"></video><listing id="jwat4"><dfn id="jwat4"><label id="jwat4"><sub id="jwat4"></sub></label></dfn></listing><rt id="jwat4"><tr id="jwat4"><cite id="jwat4"></cite></tr></rt><form id="jwat4"></form><progress id="jwat4"></progress><output id="jwat4"><fieldset id="jwat4"><option id="jwat4"><acronym id="jwat4"></acronym></option></fieldset></output><em id="jwat4"></em><kbd id="jwat4"></kbd><tr id="jwat4"><nav id="jwat4"><center id="jwat4"></center></nav></tr><delect id="jwat4"></delect><tr id="jwat4"></tr><output id="jwat4"></output><font id="jwat4"></font><s id="jwat4"></s><table id="jwat4"></table><sup id="jwat4"><table id="jwat4"><address id="jwat4"></address></table></sup><i id="jwat4"></i><legend id="jwat4"></legend><code id="jwat4"><tr id="jwat4"><nav id="jwat4"></nav></tr></code><sup id="jwat4"><input id="jwat4"><em id="jwat4"></em></input></sup><dd id="jwat4"></dd><abbr id="jwat4"></abbr><noframes id="jwat4"><rt id="jwat4"><tr id="jwat4"></tr></rt></noframes><track id="jwat4"><ol id="jwat4"><pre id="jwat4"><rt id="jwat4"></rt></pre></ol></track><pre id="jwat4"></pre><s id="jwat4"></s><tbody id="jwat4"></tbody><mark id="jwat4"></mark><thead id="jwat4"></thead><code id="jwat4"></code><optgroup id="jwat4"></optgroup><xmp id="jwat4"><li id="jwat4"><legend id="jwat4"></legend></li></xmp><form id="jwat4"><thead id="jwat4"></thead></form><samp id="jwat4"></samp><xmp id="jwat4"></xmp><pre id="jwat4"></pre><td id="jwat4"><kbd id="jwat4"></kbd></td><bdo id="jwat4"></bdo><font id="jwat4"><menu id="jwat4"><delect id="jwat4"><legend id="jwat4"></legend></delect></menu></font><del id="jwat4"><p id="jwat4"><mark id="jwat4"><strong id="jwat4"></strong></mark></p></del><del id="jwat4"></del><ul id="jwat4"></ul><p id="jwat4"></p></div>

</html>