2. 程式人生 > 其它 >非同步和執行緒池

非同步和執行緒池

阿新 • • 發佈：2022-03-07

CSS flex佈局（彈性佈局/彈性盒子）

Flex 是 Flexible Box 的縮寫，意為“彈性佈局”或者“彈性盒子”，是 CSS3 中的一種新的佈局模式，可以簡便、完整、響應式地實現各種頁面佈局，當頁面需要適應不同的螢幕大小以及裝置型別時非常適用。目前，幾乎所有的瀏覽器都支援 Flex 佈局。

1. 基本概念

採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為 Flex 專案（flex item），簡稱“專案”。容器預設存在兩根軸，分別為水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫做 main start，結束位置叫做 main end；交叉軸的開始位置叫做 cross start，結束位置叫做 cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。如下圖所示：


圖：Flex 容器

提示：您可以通過將元素的 display 屬性設定為 flex（生成塊級 flex 容器）或 inline-flex（生成類似 inline-block 的行內塊級 flex 容器）。當一個元素設定了 Flex 佈局以後，其子元素的 float、clear 和 vertical-align 等屬性將失效。

CSS 中提供了以下屬性來實現 Flex 佈局：

屬性 描述
display 指定 HTML 元素的盒子型別
flex-direction 指定彈性盒子中子元素的排列方式
flex-wrap 設定當彈性盒子的子元素超出父容器時是否換行
flex-flow flex-direction 和 flex-wrap 兩個屬性的簡寫
justify-content 設定彈性盒子中元素在主軸（橫軸）方向上的對齊方式
align-items 設定彈性盒子中元素在側軸（縱軸）方向上的對齊方式
align-content 修改 flex-wrap 屬性的行為，類似 align-items，但不是設定子元素對齊，而是設定行對齊
order 設定彈性盒子中子元素的排列順序
align-self 在彈性盒子的子元素上使用，用來覆蓋容器的 align-items 屬性
flex 設定彈性盒子中子元素如何分配空間
flex-grow 設定彈性盒子的擴充套件比率
flex-shrink 設定彈性盒子的收縮比率
flex-basis 設定彈性盒子伸縮基準值


按照作用範圍的不同，這些屬性可以分為兩類，分別為容器屬性（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content）和專案屬性（order、align-self、flex、flex-grow、flex-shrink、flex-basis）。下面就來介紹一下這些屬性的使用。

2. 容器屬性

1) flex-direction

flex-direction 屬性用來決定主軸的方向（即專案的排列方向），屬性的可選值如下：

值 描述
row 預設值，主軸沿水平方向從左到右
row-reverse 主軸沿水平方向從右到左
column 主軸沿垂直方向從上到下
column-reverse 主軸沿垂直方向從下到上
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承此屬性的值


示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. #main {
  6. border: 1px solid #CCC;
  7. padding: 5px;
  8. position: relative;
  9. }
  10. .row, .row_reverse, .column, .column_reverse{
  11. display: flex;
  12. margin-bottom: 5px;
  13. }
  14. .row {
  15. flex-direction: row;
  16. }
  17. .row_reverse {
  18. flex-direction: row-reverse;
  19. }
  20. .column {
  21. flex-direction: column;
  22. }
  23. .column_reverse {
  24. flex-direction: column-reverse;
  25. position: absolute;
  26. top: 120px;
  27. left: 400px;
  28. }
  29. .row div, .row_reverse div, .column div, .column_reverse div {
  30. width: 50px;
  31. height: 50px;
  32. border: 1px solid black;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div id="main">
  38. <div class="row">
  39. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  40. </div>
  41. <div class="row_reverse">
  42. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  43. </div>
  44. <div class="column">
  45. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  46. </div>
  47. <div class="column_reverse">
  48. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

執行結果如下圖所示：


圖：flex-direction 屬性演示

2) flex-wrap

flex-wrap 屬性用來設定當彈性盒子的子元素（專案）超出父容器時是否換行，屬性的可選值如下：

值 描述
nowrap 預設值，表示專案不會換行
wrap 表示專案會在需要時換行
wrap-reverse 表示專案會在需要時換行，但會以相反的順序
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承屬性的值


示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. #main {
  6. border: 1px solid #CCC;
  7. padding: 5px;
  8. }
  9. .nowrap, .wrap, .wrap_reverse {
  10. display: flex;
  11. flex-direction: row;
  12. margin-bottom: 15px;
  13. }
  14. .nowrap {
  15. flex-wrap: nowrap;
  16. }
  17. .wrap {
  18. flex-wrap: wrap;
  19. }
  20. .wrap_reverse {
  21. flex-wrap: wrap-reverse;
  22. }
  23. .nowrap div, .wrap div, .wrap_reverse div {
  24. width: 70px;
  25. height: 50px;
  26. border: 1px solid black;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="main">
  32. <div class="nowrap">
  33. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  34. </div>
  35. <div class="wrap">
  36. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  37. </div>
  38. <div class="wrap_reverse">
  39. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  40. </div>
  41. </div>
  42. </body>
  43. </html>

執行結果如下圖所示：


圖：flex-wrap 屬性演示

3) flex-flow

flex-flow 屬性是 flex-direction 和 flex-wrap 兩個屬性的簡寫，語法格式如下：

flex-flow: flex-direction flex-wrap;

示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex_flow {
  6. display: flex;
  7. flex-flow: row-reverse wrap;
  8. }
  9. .flex_flow div {
  10. width: 60px;
  11. height: 60px;
  12. margin-bottom: 5px;
  13. border: 1px solid black;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="flex_flow">
  19. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  20. </div>
  21. </body>
  22. </html>

執行結果如下圖所示：


圖：flex-flow 屬性演示

4) justify-content

justify-content 屬性用於設定彈性盒子中元素在主軸（橫軸）方向上的對齊方式，屬性的可選值如下：

值 描述
flex-start 預設值，左對齊
flex-end 右對齊
center 居中
space-between 兩端對齊，專案之間的間隔是相等的
space-around 每個專案兩側的間隔相等
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承屬性的值


示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. margin-top: 10px;
  9. }
  10. .flex div {
  11. width: 60px;
  12. height: 60px;
  13. margin-bottom: 5px;
  14. border: 1px solid black;
  15. }
  16. .flex-start {
  17. justify-content: flex-start;
  18. }
  19. .flex-end {
  20. justify-content: flex-end;
  21. }
  22. .center {
  23. justify-content: center;
  24. }
  25. .space-between {
  26. justify-content: space-between;
  27. }
  28. .space-around {
  29. justify-content: space-around;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="flex flex-start">
  35. <div>A</div><div>B</div><div>C</div><div>D</div>
  36. </div>
  37. <div class="flex flex-end">
  38. <div>A</div><div>B</div><div>C</div><div>D</div>
  39. </div>
  40. <div class="flex center">
  41. <div>A</div><div>B</div><div>C</div><div>D</div>
  42. </div>
  43. <div class="flex space-between">
  44. <div>A</div><div>B</div><div>C</div><div>D</div>
  45. </div>
  46. <div class="flex space-around">
  47. <div>A</div><div>B</div><div>C</div><div>D</div>
  48. </div>
  49. </body>
  50. </html>

執行結果如下圖所示：


圖：justify-content 屬性演示

5) align-items

align-items 屬性用來設定彈性盒子中元素在側軸（縱軸）方向上的對齊方式，屬性的可選值如下：

值 描述
stretch 預設值，專案將被拉伸以適合容器
center 專案位於容器的中央
flex-start 專案位於容器的頂部
flex-end 專案位於容器的底部
baseline 專案與容器的基線對齊
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承屬性的值


幾個屬性值的效果如下圖所示：


圖：align-items 屬性演示

6) align-content

align-content 屬性與 justify-content 屬性類似，可以在彈性盒子的側軸還有多餘空間時調整容器內專案的對齊方式，屬性的可選值如下：

值 描述
stretch 預設值，將專案拉伸以佔據剩餘空間
center 專案在容器內居中排布
flex-start 專案在容器的頂部排列
flex-end 專案在容器的底部排列
space-between 多行專案均勻分佈在容器中，其中第一行分佈在容器的頂部，最後一行分佈在容器的底部
space-around 多行專案均勻分佈在容器中，並且每行的間距（包括離容器邊緣的間距）都相等
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承該屬性的值


幾個屬性值的效果如下圖所示：


圖：align-content 屬性演示

3. 專案屬性

1) order

order 屬性用來設定專案在容器中出現的順序，您可以通過具體的數值來定義專案在容器中的位置，屬性的語法格式如下：

order: number;

其中 number 就是專案在容器中的位置，預設值為 0。

示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. margin-top: 10px;
  9. }
  10. .flex div {
  11. width: 60px;
  12. height: 60px;
  13. margin-bottom: 5px;
  14. border: 1px solid black;
  15. }
  16. .flex div:nth-child(1) {
  17. order: 5;
  18. }
  19. .flex div:nth-child(2) {
  20. order: 3;
  21. }
  22. .flex div:nth-child(3) {
  23. order: 1;
  24. }
  25. .flex div:nth-child(4) {
  26. order: 2;
  27. }
  28. .flex div:nth-child(5) {
  29. order: 4;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="flex">
  35. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  36. </div>
  37. </body>
  38. </html>

執行結果如下圖所示：


圖：order 屬性演示

2) align-self

align-self 屬性允許您為某個專案設定不同於其它專案的對齊方式，該屬性可以覆蓋 align-items 屬性的值。align-self 屬性的可選值如下：

值 描述
auto 預設值，表示元素將繼承其父容器的 align-items 屬性值，如果沒有父容器，則為“stretch”
stretch 專案將被拉伸以適合容器
center 專案位於容器的中央
flex-start 專案位於容器的頂部
flex-end 專案位於容器的底部
baseline 專案與容器的基線對齊
initial 將此屬性設定為屬性的預設值
inherit 從父元素繼承屬性的值


示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. align-items: flex-end;
  9. border: 1px solid #CCC;
  10. height: 150px;
  11. }
  12. .flex div {
  13. width: 60px;
  14. height: 60px;
  15. border: 1px solid black;
  16. }
  17. .flex div:nth-child(4) {
  18. align-self: flex-start;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="flex">
  24. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  25. </div>
  26. </body>
  27. </html>

執行結果如下圖所示：


圖：align-self 屬性演示

3) flex

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三個屬性的簡寫，語法格式如下：

flex: flex-grow flex-shrink flex-basis;

引數說明如下：

  • flex-grow：（必填引數）一個數字，用來設定專案相對於其他專案的增長量，預設值為 0；
  • flex-shrink：（選填引數）一個數字，用來設定專案相對於其他專案的收縮量，預設值為 1；
  • flex-basis：（選填引數）專案的長度，合法值為 auto（預設值，表示自動）、inherit（表示從父元素繼承該屬性的值） 或者以具體的值加 "%"、"px"、"em" 等單位的形式。


另外，flex 屬性還有兩個快捷值，分別為 auto（1 1 auto）和 none（0 0 auto）。

示例程式碼如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. align-items: flex-end;
  9. border: 1px solid #CCC;
  10. }
  11. .flex div {
  12. width: 60px;
  13. height: 60px;
  14. border: 1px solid black;
  15. }
  16. .flex div:nth-child(2) {
  17. flex:0;
  18. }
  19. .flex div:nth-child(4) {
  20. flex:1 1 auto;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="flex">
  26. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  27. </div>
  28. </body>
  29. </html>

執行結果如下圖所示：


圖：flex 屬性演示


另外，除了可以使用 flex 屬性外，您也可以使用 flex-grow、flex-shrink、flex-basis 幾個屬性來分別設定專案的增長量、收縮量以及專案長度，例如：

  1. .flex div:nth-child(4) {
  2. flex-grow: 1;
  3. flex-shrink: 1;
  4. flex-basis: auto;
  5. /* 等同於 flex:1 1 auto; */
  6. }

相關推薦

非同步和執行緒池

一、執行緒回顧 初始化執行緒的 4 種方式 繼承 Thread public class test { public static void main(String[] args) {

Django非同步任務執行緒池實現原理

這篇文章主要介紹了Django非同步任務執行緒池實現原理,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Java 執行緒狀態和等待喚醒機制和執行緒池的實現

1.概念 執行緒一共有6中狀態，相互之間可以互相轉換。 等待喚醒案例（執行緒之間的通訊）

池化技術到達有多牛？看了執行緒和執行緒池的對比嚇我一跳！

情商高的人是能洞察並照顧到身邊所有人的情緒，而好的文章應該是讓所有人都能看懂。

多執行緒和執行緒池

1.1多執行緒介紹 程序：程序指正在執行的程式。確切的來說，當一個程式進入記憶體執行，即變成一個程序，程序是處於執行過程中的程式，並且具有一定獨立功能

第十章：Python高階程式設計-多執行緒、多程序和執行緒池程式設計

第十章：Python高階程式設計-多執行緒、多程序和執行緒池程式設計 Python3高階核心技術97講 筆記

python 遞迴鎖、訊號量、事件、執行緒佇列、程序池和執行緒池、回撥函式

一、python執行緒死鎖與遞迴鎖 死鎖現象 所謂死鎖： 是指兩個或兩個以上的程序或執行緒在執行過程中，因爭奪資源而造成的一種互相等待的現象，若無外力作用，它們都將無法推進下去。

任務和執行緒池筆記

構造一個新的執行緒開銷有些大，因為這涉及與作業系統的互動。如果你的程式中建立了大量的生命期很短的執行緒，那麼不應該把每個任務對映到一個單獨的執行緒，而應該使用執行緒池(thread pool)。執行緒池中包含許多準

python是如何實現程序池和執行緒池的_C++11實現的100行執行緒池

技術標籤：python是如何實現程序池和執行緒池的 (給CPP開發者加星標，提升C/C++技能)

阻塞佇列和執行緒池

寫入：如果佇列滿了，就必須阻塞等待 取出：如果佇列是空的，必須阻塞等待生產

Linux高效能伺服器程式設計—程序池和執行緒池

1. 池的概念 池的描述和定義：Pool（池）的概念被廣泛的應用在伺服器端軟體的開發上。使用池結構可以明顯的提高你的應用程式的速度，改善效率和降低系統資源的開銷。所以在應用伺服器端的開發中池的設計和實現是開發

【Java】JAVA多執行緒和執行緒池

1、執行緒狀態 (1) 新建狀態 使用 new 關鍵字和 Thread 類或其子類建立一個執行緒物件後，該執行緒物件就處於新建狀態。它保持這個狀態直到程式 start() 這個執行緒。

IO多路複用和執行緒池

問題本身貌似有問題。簡單比較兩種工具的優劣意義不大。你沒法說錘子和剪刀那個更好。我們一般會評價對於某個場景，哪種工具更合適。

非同步&執行緒池

一、執行緒回顧 1、初始化執行緒的 4 種方式 繼承 Thread 實現 Runnable 介面 實現 Callable 介面 + FutureTask （可以拿到返回結果，可以處理異常）

python多執行緒和執行緒池使用記錄

python 通過  from threading import Thread  使用Thread類 # 通過 threading模組引用Thread類

Springboot配置Schedule定時任務執行緒池和Async非同步執行緒池

技術標籤：Springboot Springboot配置Schedule定時任務執行緒池 Springboot預設的定時任務是單執行緒的，當我們的定時任務較多並且耗時較長時，為了提升效率我們可以給定時任務配置一個執行緒池，以多執行緒的方

Spring使用ThreadPoolTaskExecutor自定義執行緒池及實現非同步呼叫

多執行緒一直是工作或面試過程中的高頻知識點，今天給大家分享一下使用 ThreadPoolTaskExecutor 來自定義執行緒池和實現非同步呼叫多執行緒。

JDK執行緒池和Spring執行緒池的使用例項解析

這篇文章主要介紹了JDK執行緒池和Spring執行緒池的使用例項解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Spring Boot使用Spring的非同步執行緒池的實現

前言 執行緒池，從名字上來看，就是一個儲存執行緒的\"池子\"，凡事都有其道理，那執行緒池的好處在哪裡呢？

JAVA執行緒池專題（概念和作用）

執行緒池的作用 我們在用一個東西的時候，首先得搞明白一個問題。這玩意是幹嘛的，為啥要用這個，用別的不行嗎。那麼一個一個解決這些問題