分類: 3C資訊

本文是 Spring Boot 整合數據持久化方案的最後一篇，主要和大夥來聊聊 Spring Boot 整合 Jpa 多數據源問題。在 Spring Boot 整合JbdcTemplate 多數據源、Spring Boot 整合 MyBatis 多數據源以及 Spring Boot 整合 Jpa 多數據源這三個知識點中，整合 Jpa 多數據源算是最複雜的一種，也是很多人在配置時最容易出錯的一種。本文大夥就跟着松哥的教程，一步一步整合 Jpa 多數據源。

工程創建

首先是創建一個 Spring Boot 工程，創建時添加基本的 Web、Jpa 以及 MySQL 依賴，如下：

創建完成后，添加 Druid 依賴，這裏和前文的要求一樣，要使用專為 Spring Boot 打造的 Druid，大夥可能發現了，如果整合多數據源一定要使用這個依賴，因為這個依賴中才有 DruidDataSourceBuilder，最後還要記得鎖定數據庫依賴的版本，因為可能大部分人用的還是 5.x 的 MySQL 而不是 8.x。完整依賴如下：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid-spring-boot-starter</artifactId>
    <version>1.1.10</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.28</version>
    <scope>runtime</scope>
</dependency>

如此之後，工程就創建成功了。

基本配置

在基本配置中，我們首先來配置多數據源基本信息以及 DataSource，首先在 application.properties 中添加如下配置信息：

#  數據源一
spring.datasource.one.username=root
spring.datasource.one.password=root
spring.datasource.one.url=jdbc:mysql:///test01?useUnicode=true&characterEncoding=UTF-8
spring.datasource.one.type=com.alibaba.druid.pool.DruidDataSource

#  數據源二
spring.datasource.two.username=root
spring.datasource.two.password=root
spring.datasource.two.url=jdbc:mysql:///test02?useUnicode=true&characterEncoding=UTF-8
spring.datasource.two.type=com.alibaba.druid.pool.DruidDataSource

# Jpa配置
spring.jpa.properties.database=mysql
spring.jpa.properties.show-sql=true
spring.jpa.properties.database-platform=mysql
spring.jpa.properties.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL57Dialect

這裏 Jpa 的配置和上文相比 key 中多了 properties，多數據源的配置和前文一致，然後接下來配置兩個 DataSource，如下：

@Configuration
public class DataSourceConfig {
    @Bean
    @ConfigurationProperties(prefix = "spring.datasource.one")
    @Primary
    DataSource dsOne() {
        return DruidDataSourceBuilder.create().build();
    }
    @Bean
    @ConfigurationProperties(prefix = "spring.datasource.two")
    DataSource dsTwo() {
        return DruidDataSourceBuilder.create().build();
    }
}

這裏的配置和前文的多數據源配置基本一致，但是注意多了一個在 Spring 中使用較少的註解 @Primary，這個註解一定不能少，否則在項目啟動時會出錯，@Primary 表示當某一個類存在多個實例時，優先使用哪個實例。

好了，這樣，DataSource 就有了。

多數據源配置

接下來配置 Jpa 的基本信息，這裏兩個數據源，我分別在兩個類中來配置，先來看第一個配置：

@Configuration
@EnableJpaRepositories(basePackages = "org.javaboy.jpa.dao",entityManagerFactoryRef = "localContainerEntityManagerFactoryBeanOne",transactionManagerRef = "platformTransactionManagerOne")
public class JpaConfigOne {
    @Autowired
    @Qualifier(value = "dsOne")
    DataSource dsOne;
    @Autowired
    JpaProperties jpaProperties;
    @Bean
    @Primary
    LocalContainerEntityManagerFactoryBean localContainerEntityManagerFactoryBeanOne(EntityManagerFactoryBuilder builder) {
        return builder.dataSource(dsOne)
                .packages("org.javaboy.jpa.model")
                .properties(jpaProperties.getProperties())
                .persistenceUnit("pu1")
                .build();
    }
    @Bean
    PlatformTransactionManager platformTransactionManagerOne(EntityManagerFactoryBuilder builder) {
        LocalContainerEntityManagerFactoryBean factoryBeanOne = localContainerEntityManagerFactoryBeanOne(builder);
        return new JpaTransactionManager(factoryBeanOne.getObject());
    }
}

首先這裏注入 dsOne，再注入 JpaProperties，JpaProperties 是系統提供的一個實例，裡邊的數據就是我們在 application.properties 中配置的 jpa 相關的配置。然後我們提供兩個 Bean，分別是 LocalContainerEntityManagerFactoryBean 和 PlatformTransactionManager 事務管理器，不同於 MyBatis 和 JdbcTemplate，在 Jpa 中，事務一定要配置。在提供 LocalContainerEntityManagerFactoryBean 的時候，需要指定 packages，這裏的 packages 指定的包就是這個數據源對應的實體類所在的位置，另外在這裏配置類上通過 @EnableJpaRepositories 註解指定 dao 所在的位置，以及 LocalContainerEntityManagerFactoryBean 和 PlatformTransactionManager 分別對應的引用的名字。

好了，這樣第一個就配置好了，第二個基本和這個類似，主要有幾個不同點：

• dao 的位置不同
• persistenceUnit 不同
• 相關 bean 的名稱不同

注意實體類可以共用。

代碼如下：

@Configuration
@EnableJpaRepositories(basePackages = "org.javaboy.jpa.dao2",entityManagerFactoryRef = "localContainerEntityManagerFactoryBeanTwo",transactionManagerRef = "platformTransactionManagerTwo")
public class JpaConfigTwo {
    @Autowired
    @Qualifier(value = "dsTwo")
    DataSource dsTwo;
    @Autowired
    JpaProperties jpaProperties;
    @Bean
    LocalContainerEntityManagerFactoryBean localContainerEntityManagerFactoryBeanTwo(EntityManagerFactoryBuilder builder) {
        return builder.dataSource(dsTwo)
                .packages("org.javaboy.jpa.model")
                .properties(jpaProperties.getProperties())
                .persistenceUnit("pu2")
                .build();
    }
    @Bean
    PlatformTransactionManager platformTransactionManagerTwo(EntityManagerFactoryBuilder builder) {
        LocalContainerEntityManagerFactoryBean factoryBeanTwo = localContainerEntityManagerFactoryBeanTwo(builder);
        return new JpaTransactionManager(factoryBeanTwo.getObject());
    }
}

接下來，在對應位置分別提供相關的實體類和 dao 即可，數據源一的 dao 如下：

package org.javaboy.jpa.dao;
public interface UserDao extends JpaRepository<User,Integer> {
    List<User> getUserByAddressEqualsAndIdLessThanEqual(String address, Integer id);
    @Query(value = "select * from t_user where id=(select max(id) from t_user)",nativeQuery = true)
    User maxIdUser();
}

數據源二的 dao 如下：

package org.javaboy.jpa.dao2;
public interface UserDao2 extends JpaRepository<User,Integer> {
    List<User> getUserByAddressEqualsAndIdLessThanEqual(String address, Integer id);

    @Query(value = "select * from t_user where id=(select max(id) from t_user)",nativeQuery = true)
    User maxIdUser();
}

共同的實體類如下：

package org.javaboy.jpa.model;
@Entity(name = "t_user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;
    private String username;
    private String address;
    //省略getter/setter
}

到此，所有的配置就算完成了，接下來就可以在 Service 中注入不同的 UserDao，不同的 UserDao 操作不同的數據源。

其實整合 Jpa 多數據源也不算難，就是有幾個細節問題，這些細節問題解決，其實前面介紹的其他多數據源整個都差不多。

好了，本文就先介紹到這裏。

相關案例已經上傳到 GitHub，歡迎小夥伴們們下載：

掃碼關注松哥，公眾號後台回復 2TB，獲取松哥獨家 超2TB 免費 Java 學習乾貨

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司，全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置，台北網頁設計，各種案例分享

一、簡介

flexbox：全稱Flexible Box, 彈性盒子布局。可以簡單實現各種伸縮性的設計，它是由伸縮容器和伸縮項目組成。任何一個元素都可以指定為flexbox布局。這種新的布局方案在2009年是由W3C組織提出來的，在此之前，Web開發一般使用基於盒子模型的傳統頁面布局，依賴定位屬性、流動屬性和显示屬性來解決，參看鏈接：。彈性盒子布局的出現，極大的方便了開發者，在如今的ReactNative開發中，也已經被引入使用。

伸縮流布局結構圖如下：

彈性盒子布局具備的特徵：

1、伸縮容器的子元素稱為伸縮項目，伸縮項目使用伸縮布局來排版。伸縮布局和傳統布局不一樣，它按照伸縮流方向布局。

2、伸縮容器由兩條軸構成，分別為主軸(main axis)和交叉軸(cross axis)。主軸既可以用水平軸，也可以是豎直軸，根據開發者需要來決定。

3、主軸的起點叫main start，終點叫main end，主軸的空間用main size表示。

4、交叉軸的起點叫cross start，終點叫cross end，交叉軸的空間用cross size表示。

5、默認情況下，伸縮項目總是沿着主軸方向排版，從開始位置到終點位置。至於換行显示，則通過設置伸縮屬性來實現。

6、伸縮容器的屬性有：display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

7、伸縮項目的屬性有: order、flex-grow、flex-shrink、flex-basis、flex、align-self

二、伸縮容器的屬性，全局設置排版

HTML：[注意：下面的演示截圖項目個數會根據需要選擇性註釋“flex-item”，有時用不到5個]

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox</title>
    <!--  採用外聯方式導入css文件 -->
    <link rel="stylesheet" type="text/css" href="./css_test.css">
</head>
<body>
    <span class="flex-container"> 
        <span class="flex-item" id="item1" style="color:white;font-size:20px">1</span>
        <span class="flex-item" id="item2" style="color:white;font-size:20px">2</span>
        <span class="flex-item" id="item3" style="color:white;font-size:20px">3</span>
        <span class="flex-item" id="item4" style="color:white;font-size:20px">4</span>
        <span class="flex-item" id="item5" style="color:white;font-size:20px">5</span>
    </span>
</body>
</html> 

1、display：決定元素是否為伸縮容器

• flex：產生塊級伸縮容器

  .flex-container {
       display: flex;
   }

• inline-flex：產生行內塊級伸縮容器

•  .flex-container {
       display: inline-flex;
   }

2、flex-direction：指定伸縮容器主軸的方向

• row：水平方向，從左到右

   .flex-container {
       display: flex;
       flex-direction: row;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; 
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• row-reverse：水平方向，從右到左

   .flex-container {
       display: flex;
       flex-direction: row-reverse;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; 
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• column：豎直方向，從上到下

   .flex-container {
       display: flex;
       flex-direction: column;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px; 
       background-color: green;
       margin: 1px;
   }

• column-reverse：豎直方向，從下到上

   .flex-container {
       display: flex;
       flex-direction: column-reverse;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px; 
       background-color: green;
       margin: 1px;
   }

3、flex-wrap：指定伸縮容器主軸方向空間不足時，決定是否換行以及換行方式

• nowarp：不換行

  .flex-container {
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; //下圖單行狀態寬度被重新計算
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• warp：換行，若主軸為水平方向，換行方向是從上到下

   .flex-container {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• wrap-reverse：換行，若主軸為水平方向，換行方向是從下到上

   .flex-container {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap-reverse;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

4、flex-flow：flex-direction和flex-wrap的縮寫，同時指定伸縮容器主軸方向和換行設置

• row nowrap：默認主軸是水平方向，從左到右，且不換行

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; //下圖單行狀態寬度被重新計算
       height: 50px;
       background-color: green;
       margin: 1px;
   }

5、justify-content：決定伸縮項目沿着主軸線的對齊方式

• flex-start：與主軸線起始位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       justify-content: flex-start;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• flex-end：與主軸線結束位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       justify-content: flex-end;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• center：與主軸線中間位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       justify-content: center;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• space-between：平均分配到主軸線里，第一個項目靠齊起始位置，最後一個項目靠齊終點位置

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       justify-content: space-between;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• sapce-around：平均分配到主軸線里，兩端保留一半的空間

  .flex-container {
       display: flex;
       flex-flow: row wrap;
       justify-content: space-around;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

6、align-items：決定伸縮項目不能換行時沿着交叉軸線的對齊方式

• flex-start：與交叉軸線起始位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       align-items: flex-start;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; //下圖單行狀態寬度被重新計算
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• flex-end：與交叉軸線結束位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       align-items: flex-end;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; //下圖單行狀態寬度被重新計算
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• center：與交叉軸線中間位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• baseline：根據基線對齊

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       align-items: baseline;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item1 {
       padding-top: 25px;
   }
  
   #item2 {
       padding-top: 20px;
   }
    
   #item3 {
       padding-top: 15px;
   }
  
   #item4 {
       padding-top: 10px;
   }
    
   #item5 {
       padding-top: 5px;
   }

• stretch：沿着交叉軸線拉伸填充整個伸縮容器

   .flex-container {
       display: flex;
       flex-flow: row nowrap;
       align-items: stretch;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;//此時可以設置寬度，但不能設置高度，否則無法拉伸
       background-color: green;
       margin: 1px;
   }

7、align-content：決定伸縮項目可以換行時沿着交叉軸線的對齊方式，flex-warp:warp一定要開啟

• flex-start：與交叉軸線起始位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:flex-start;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• flex-end：與交叉軸線結束位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:flex-end;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• center：與主軸線中間位置靠齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:center;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• space-between：平均分配到主軸線里，第一行項目靠齊起始位置，最後一行項目靠齊終點位置

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:space-between;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• sapce-around：所有行平均分配到主軸線里，兩端保留一半的空間

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:space-around;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }

• stretch：沿着交叉軸

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       align-content:stretch;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px; //不要設置高度，不然無法拉伸
       background-color: green;
       margin: 1px;
   }

三、伸縮項目的屬性，單個設置排版

1、order：定義伸縮項目的排列順序。數值越小，排列越靠前，默認值為0。

• 表達式 order: integer;

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item4 {
       order: -1;
   }
  
   #item5 {
       order: -2;
   }

2、flex-grow：定義伸縮項目的放大比例，默認值為0，表示即使存在剩餘空間，也不放大。

• 表達式 flex-grow: number;

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item2 {
       flex-grow: 1; //空間不足，item2不會放大
   }
  
   #item4 {
       flex-grow: 1; //item4放大填滿剩餘空間
   }

3、flex-shrink：定義伸縮項目的收縮比例，默認值為1。

• 表達式 flex-shrink: numer;

  .flex-container {
       display: flex;
       flex-flow: row nowrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item4 {
       flex-shrink:3; //單行，空間有限，item4縮小為原來的1/3
   }
  
   #item5 {
       flex-shrink:4;  //單行，空間有限，item5縮小為原來的1/5
  }

4、flex-basis：定義伸縮項目的基準值，剩餘空間按照比例進行伸縮，默認auto。

•  auto

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item5 {
       flex-basis:auto;
   }

• flex-basis: length 

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item5 {
       flex-basis:200px;
   }

5、flex：是flex-grow、flex-shrink、flex-basis的縮寫，默認值 0 1 auto。

• none: 不設置

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item2 {
       flex: none; /* 等同於 flex: 0 0 auto */
   }

• flex-grow flex-shrink flex-basis: 設置放大或縮小或基準線

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item2 {
       flex: 1; /* 等同於 flex: 1 1 auto 或者 等同於 flex: auto*/
   }

6、align-self：用來設置伸縮項目在交叉軸的對齊方式。

• auto：自動對齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item3 {
       align-self: auto;
   }

• flex-start: 向交叉軸的開始位置對齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item3 {
       align-self: flex-start;
   }

• flex-end: 向交叉軸的結束位置對齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item3 {
       align-self: flex-end;
   }

• center: 向交叉軸的中間位置對齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item3 {
       align-self: center;
   }

• baseline:向交叉軸的基準線對齊

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       height: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item1 {
       align-self: baseline;
       margin-top: 50px;
   }
  
   #item2 {
       align-self: baseline;
   }

• stretch: 在交叉軸拉伸填滿伸縮容器

   .flex-container {
       display: flex;
       flex-flow: row wrap;
       width: 160px;
       height: 160px;
       background-color: red;
   }
  
   .flex-item {
       width: 50px;
       background-color: green;
       margin: 1px;
   }
  
   #item1 {
       align-self: stretch;
   }
  
   #item2 {
       align-self: stretch;
   }
  
   #item3 {
       align-self: stretch;
   }

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象