給於肝肝工程師小額捐款'v': ETH/ERC20
六角學院
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
我們再複習一遍主軸是甚麼?
主軸方向flex-direction先確認!
我們今天更改的範圍是 : container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/Flex-justify-content.css">
<title>Flex-Direction </title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>.container {
display: flex;
width: auto;
height: auto;
background-color: blue;
flex-direction:row;
}
.item {
width: 150px;
height: 50px;
background: #00ffa2;
color: #033b56;
font-style: initial;
text-align: center;
font-size: 35px;
}Flex-direction =row >> 從左到右
space-between 方法
.container {
display: flex;
width: auto;
height: auto;
background-color: blue;
flex-direction:row;
justify-content:space-between;
}
.item {
width: 150px;
height: 50px;
background: #00ffa2;
color: #033b56;
font-style: initial;
text-align: center;
font-size: 35px;
}flex-start 方法
.container {
display: flex;
width: auto;
height: auto;
background-color: blue;
flex-direction:row;
justify-content:flex-start;
}
.item {
width: 150px;
height: 50px;
background: #00ffa2;
color: #033b56;
font-style: initial;
text-align: center;
font-size: 35px;
}其實就是保持flex 效果的原狀態。
結語
在測試順序上, 我們大多從Flex-direction 開始定義
之後再去調整Justify-content, 藉此調整主軸排列方式。
有順序概念會比較不容易搞混!
import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module（模組）…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…