FCC---CSS Flexbox: Align Elements Using the justify-content Property

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/08/12008343.html

Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space o ...


Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.

Here is a useful image showing a row to illustrate the concepts below.

 

 

Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.

There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Others options include:

 

  • flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no justify-content is specified.
  • flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.
  • space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.
  • space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.
  • space-evenly: Distributes space evenly between the flex items with a full space at either end of the flex container

 

 

An example helps show this property in action. Add the CSS property justify-content to the #box-container element, and give it a value of center.

Bonus
Try the other options for the justify-content property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge.

 


 

換上上面提到的幾個屬性,都可以操作,體會實際效果~

from: 

 

to: 

 

 

 

 


您的分享是我們最大的動力!

更多相關文章
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" awk變數 awk的變數是動態變數,在使用時聲明。 所以awk變數有3種狀態: 未聲明狀態:稱為untyped類型 引用過但未賦值狀態:unassigned類型 已賦值狀態 引用未賦值的變數,其預設初始值為空字元串或數值0 ...
  • 回到: "Linux系列文章" "Shell系列文章" "Awk系列文章" 輸出操作 awk可以通過print、printf將數據輸出到標準輸出或重定向到文件。 print 逗號分隔要列印的欄位列表,各欄位都 會自動轉換成字元串格式 ,然後通過預定義變數OFS(output field separa ...
  • 日常操作中我們經常使用到文件壓縮操作,其使用一些特定的演算法來減小文件的大小,可以提高傳輸數據時的速率和減少數據在一些存儲機制上占有的空間大小,實現空間利用最大化。 比如:如果你想通過郵箱發送一個文件夾,你會發現可能行不通,怎麼辦呢,難道將文件夾內的內容一個個發送嗎?顯然不用,因為郵箱不支持文件夾這種 ...
  • 1、Where、Order by、Group by 、having Where作用對象是:基本表或視圖,從中選出符合條件的元素。 Order by 作用對象是:基本表或視圖,就是排序方式,分為升序(ASC)和降序(DESC),排序預設為升序 Group by 作用對象是:基本表或視圖,把對象進行分組 ...
  • 1. MapReduce入門 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 適用於大量的複雜的任務處理場景 (大規模數據處理場景) . Map負責"分" , 即把複雜的任務分解為若幹個"簡單的任務"來進行處理. 可以進行拆分的前提是這些小任務並行計算, 彼此間幾乎 ...
  • 今年 5 月,谷歌在 I/O 大會上宣佈,Kotlin 編程語言成為其 Android 應用程式開發人員的首選語言。 Kotlin 是一種面向現代多平臺應用程式的編程語言,成為谷歌開發 Android 應用程式的首選語言後,許多開發人員逐漸地從 Java 轉向 Kotlin。根據最新的一項調查顯示, ...
  • 什麼是結構、樣式、行為分離?這樣做的好處是什麼? web標準的核心理念就是結構標準、樣式標準和行為標準,提倡結構、表現和行為相分離,即HTML-結構、CSS-表現、JavaScript-行為 分離。 HTML標簽給予內容含義,CSS表現層則定義HTML該如何顯示(外觀),JavaScript行為成為 ...
  • Vue.js 使用了基於 HTML 的模板語法,允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循規範的瀏覽器和 HTML 解析器解析。 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...