FCC---CSS Flexbox: Use the flex-direction Property to Make a Column

来源:https://www.cnblogs.com/jane-panyiyun/archive/2019/12/08/12008229.html
-Advertisement-
Play Games

The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a f ...


The last two challenges used the flex-direction property set to row.

This property can also create a column by vertically stacking the children of a flex container.

 


 

Add the CSS property flex-direction to the #box-container element, and give it a value of column.

 


 

<style>
  #box-container {
    display: flex;
    height: 500px;
    flex-direction: column;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

 


 

 

 

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 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 解析器解析。 ...
  • 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 ...
  • 哎,我真的是太難了,今天就被這個解構賦值(也可以叫做析構,貌似析構是在c++中的,所以我這裡叫做解構賦值吧)弄的我很煩,本來以為很容易的,結果還是弄了好久。。。就總結一下解構吧! 1.解構的基本使用 什麼叫做解構呢?其實就是類似正則表達式的這麼一個東西,就是用一個有規則的表達式去匹配一個對象,這個表 ...
  • The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element wou ...
一周排行
    -Advertisement-
    Play Games
  • 1. 說明 /* Performs operations on System.String instances that contain file or directory path information. These operations are performed in a cross-pla ...
  • 視頻地址:【WebApi+Vue3從0到1搭建《許可權管理系統》系列視頻:搭建JWT系統鑒權-嗶哩嗶哩】 https://b23.tv/R6cOcDO qq群:801913255 一、在appsettings.json中設置鑒權屬性 /*jwt鑒權*/ "JwtSetting": { "Issuer" ...
  • 引言 集成測試可在包含應用支持基礎結構(如資料庫、文件系統和網路)的級別上確保應用組件功能正常。 ASP.NET Core 通過將單元測試框架與測試 Web 主機和記憶體中測試伺服器結合使用來支持集成測試。 簡介 集成測試與單元測試相比,能夠在更廣泛的級別上評估應用的組件,確認多個組件一起工作以生成預 ...
  • 在.NET Emit編程中,我們探討了運算操作指令的重要性和應用。這些指令包括各種數學運算、位操作和比較操作,能夠在動態生成的代碼中實現對數據的處理和操作。通過這些指令,開發人員可以靈活地進行算術運算、邏輯運算和比較操作,從而實現各種複雜的演算法和邏輯......本篇之後,將進入第七部分:實戰項目 ...
  • 前言 多表頭表格是一個常見的業務需求,然而WPF中卻沒有預設實現這個功能,得益於WPF強大的控制項模板設計,我們可以通過修改控制項模板的方式自己實現它。 一、需求分析 下圖為一個典型的統計表格,統計1-12月的數據。 此時我們有一個需求,需要將月份按季度劃分,以便能夠直觀地看到季度統計數據,以下為該需求 ...
  • 如何將 ASP.NET Core MVC 項目的視圖分離到另一個項目 在當下這個年代 SPA 已是主流,人們早已忘記了 MVC 以及 Razor 的故事。但是在某些場景下 SSR 還是有意想不到效果。比如某些靜態頁面,比如追求首屏載入速度的時候。最近在項目中回歸傳統效果還是不錯。 有的時候我們希望將 ...
  • System.AggregateException: 發生一個或多個錯誤。 > Microsoft.WebTools.Shared.Exceptions.WebToolsException: 生成失敗。檢查輸出視窗瞭解更多詳細信息。 內部異常堆棧跟蹤的結尾 > (內部異常 #0) Microsoft ...
  • 引言 在上一章節我們實戰了在Asp.Net Core中的項目實戰,這一章節講解一下如何測試Asp.Net Core的中間件。 TestServer 還記得我們在集成測試中提供的TestServer嗎? TestServer 是由 Microsoft.AspNetCore.TestHost 包提供的。 ...
  • 在發現結果為真的WHEN子句時,CASE表達式的真假值判斷會終止,剩餘的WHEN子句會被忽略: CASE WHEN col_1 IN ('a', 'b') THEN '第一' WHEN col_1 IN ('a') THEN '第二' ELSE '其他' END 註意: 統一各分支返回的數據類型. ...
  • 在C#編程世界中,語法的精妙之處往往體現在那些看似微小卻極具影響力的符號與結構之中。其中,“_ =” 這一組合突然出現還真不知道什麼意思。本文將深入剖析“_ =” 的含義、工作原理及其在實際編程中的廣泛應用,揭示其作為C#語法奇兵的重要角色。 一、下劃線 _:神秘的棄元符號 下劃線 _ 在C#中並非 ...