今天用display布局兩個img元素的時候，發現自動變形了。問題如下：
然而我想要的效果是：
那麼問題來了，為什麼會變形呢？是因為flex布局的align-items屬性的值預設是stretch：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
但是為什麼height變得這麼大，我還沒有找到原因。而且，在chrome中顯示是理想狀態的，我是用手機測試的時候才發現變形的問題，然後搜狗瀏覽器的顯示效果和手機是一樣的。看來以後手機除錯還得用搜狗了。
題外話不多說，既然找到了變形的原因是stretch為align-items的預設值。那麼就改下align-items的值就完事兒了。然而，結果如下：
將align-items改為center之後，因為兩張的寬高比例是不一樣的，所以在寬度相同的情況下，高度自適應，就會乙個高乙個低。這裡為什麼不把高度寫死，是因為寬度用的是百分比。所以高度我還沒有掌握寫死的方法，因此就讓它自適應了。
網上還有一種辦法是給新增乙個height:100%的屬性，其實也就是讓align-items的預設值stretch不生效唄。（stretch：如果專案未設定高度或設為auto，將佔滿整個容器的高度。）
改完之後效果是這樣滴：
效果等同於將align-items的值設定為flex-start。
因為兩張寬高比雖然不同，但是相差不大，所以只能讓右邊的高度稍微大一些了。從而實現理想的效果：
這裡我的辦法是在img外面包裹乙個div標籤，然後div作為flex子項。img作為div的子元素。設定div的寬度，img的寬高都是100%。是可以實現理想效果的。
這裡個人認為是高一點的將div左側div撐開的比右側div高。然後因為div的父元素的align-items屬性值是stretch，所以將兩個div的高度調成一樣了。這時候img的父元素div相當於了有了width和height值，img的width和height設為100%就可以生效，佔滿整個div。
但是有一點很不解的就是，為什麼在img外面包裹了一層div，同樣是stretch的作用，div的高度就以左側這個高一些的高度為最大值。而去掉div，直接將img作為flex子項的時候，卻不能做到以左側高一點的的高度為最大值，而是縱向瘋狂拉伸！
我去網上查了一下，大家都是只知道解決的辦法，卻找不到之所以能解決的原理。對此我找了蠻久也沒有找到，找stretch的拉伸規則也沒找到。估計得去書裡面的找了，但是現在還在實習，回學校啃書的時候再找吧，不然糾結在這個問題太多時間，影響工作進度就完蛋了。
display屬性的Flex布局的學習
採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...
Linux下DISPLAY的設定
在linux unix類作業系統上,display用來設定將圖形顯示到何處.直接登陸圖形介面或者登陸命令列介面後使用startx啟 形,display環境變數將自動設定為 0 0,此時可以開啟終端,輸出圖形程式的名稱 比如xclock 來啟動程式,圖形將顯示在本地視窗上,在終端上輸入printenv...
CSS3中display的Flex布局
1 container 編譯之後的效果很明顯，介面的布局也很合理，看起來很清晰。那麼究竟這個屬性是幹嘛用的呢？flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用f...