Flexbox(只有chrome和火狐兼容)詳解裏的兩個eg:

時間 2019-12-05

標籤 flexbox 只有 chrome 火狐兼容詳解兩個欄目 Flex 简体版

原文原文鏈接

Flexbox詳解 https://segmentfault.com/a/1190000002910324裏的兩個eg:css

eg1:水平豎直居中html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flexbox</title>
	<style type="text/css">
body{
    padding: 0;
    margin: 0;
}

.parent {
  display: flex;
  height: 300px; /* Or whatever */
  background-color: black;
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
  background-color: white;
}
	</style>
</head>
<body>
	<div class="parent"><div class="child"></div></div>
</body>
</html>

eg2:新增子元素佈局web

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flexbox2</title>
	<style type="text/css">
body{
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}

.flex-container {
    /* We first create a flex layout context */
    display: flex;

    /* Then we define the flow direction and if we allow the items to wrap 
    * Remember this is the same as:
    * flex-direction: row;
    * flex-wrap: wrap;
    */
    flex-flow: row wrap;
    /*
flex-flow 屬性用於設置或檢索彈性盒模型對象的子元素排列方式。
	    flex-flow：<' flex-direction '> || <' flex-wrap '>
		默認值：看各分拆屬性
		適用於：flex容器
		繼承性：無
		動畫性：否
		計算值：指定值

		flex-direction:row;:默認值。靈活的項目將水平顯示，正如一個行同樣。
		flex-wrap:wrap;規定靈活的項目在必要的時候拆行或拆列。
    _________________________
    <' flex-direction '>：
定義彈性盒子元素的排列方向。
<' flex-wrap '>：
控制flex容器是單行或者多行。

     */
    /* Then we define how is distributed the remaining space */
    justify-content: space-around;
    /*
    justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
    space-around:項目位於各行以前、之間、以後都留有空白的容器內。
     */
    
      display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}
	</style>
</head>
<body>
	 <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
    </ul>
</body>
</html>