3 篇文章含有標籤「Flexbox」

檢視所有標籤

Flexbox Row + OverflowX issue

2024年5月24日 · 閱讀時間約 1 分鐘

Imagine Chiu

Front End Engineer @ Bearests

在用 Flexbox 排版時，有時候會遇到類似的問題，內容物當 overflow 時無法撐開, 導致背景無法顯示完整區塊

Flex(Row) + Overflow-x issue

向右捲動檢查 overflow-x問題，背景顏色不是全寬

CurrentRank

11~20

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

Next Level

Friends Rolling

Rebate

Number Withdrawal

Friends Rolling

Next Rank

21~30

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

<section className="d-flex flex-column overflow-X">
  <div>curr level</div>
  <div>title</div>
  <div>next level</div>
</section>

修正後的版本

向右捲動檢查，背景顏色全寬，主要將 flex column 跟 overflow-x 隔開

CurrentRank

11~20

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

Next Level

Friends Rolling

Rebate

Number Withdrawal

Friends Rolling

Next Rank

21~30

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

<section className="d-flex overflow-X">
  <div className="flex-column">
      <div>curr level</div>
      <div>title</div>
      <div>next level</div>
  </div>

</section>

Flexbox+Gap替代Grid System?

2023年9月20日 · 閱讀時間約 4 分鐘

Imagine Chiu

Front End Engineer @ Bearests

Flexbox 可以 Gap，直接看來說解決了 Grid System 想做的事情，就是在 Row 使用負數 Margin 將一排中的開頭與結尾的 Col 的 Padding 抵銷

那... 就沒問題了嗎?

我想，如果比較好的話，Bootstrap 5 應該早就改了

我們可以發現，Gap 的長度不會計算包含在 flex item 內 (使用比例去分攤空間的話 25% * 4)，也就是 Gap 會從100% 多出來導致跑版

是可以用一個算法來使用 flex-basis: 0 0 佔比，但是又能夠使用 gap。

<Container>
    <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>

        <Col col={12}>
            <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>
                <Col col={8}>Col 1-1</Col>
                <Col col={8}>Col 1-2</Col>
                <Col col={8}>Col 1-3</Col>
            </Row>
        </Col>

        <Col col={12}>
            <Row style={{'--bear-gutter-x': '20px'} as CSSProperties}>
                <Col col={8}>Col 2-1</Col>
                <Col col={8}>Col 2-2</Col>
                <Col col={8}>Col 2-3</Col>
            </Row>
        </Col>

    </Row>
</Container>

Container

Row

Col

Grid System Nest

Col 1

Col 2

Col 1-1

Col 1-2

Col 1-3

Col 2-1

Col 2-2

Col 2-3

Flex + Gap Nest

Col 1

Col 2

Col 1-1

Col 1-2

Col 1-3

Col 2-1

Col 2-2

Col 2-3

<Container>
    <GapRow gap="20px">

        <GapCol col={12}>
            <GapRow gap="20px">
                <GapCol col={8}>Col 1-1</GapCol>
                <GapCol col={8}>Col 1-2</GapCol>
                <GapCol col={8}>Col 1-3</GapCol>
            </GapRow>
        </GapCol>

        <GapCol col={12}>
            <GapRow gap="20px">
                <GapCol col={8}>Col 2-1</GapCol>
                <GapCol col={8}>Col 2-2</GapCol>
                <GapCol col={8}>Col 2-3</GapCol>
            </GapRow>
        </GapCol>

    </GapRow>
</Container>

const totalColumn = 24;

/**
 * 一個Container 幾個子 Col
 * @param colVal
 */

const totalColCount = (colVal: number) => {
    return Math.floor(totalColumn / colVal);
}

/**
 * 一個Col佔比
 * @param colVal
 */
const oneColP = (colVal: number) => {
    return colVal / totalColumn * 100;
}

/**
 * 一個Col佔比
 * @param colVal
 */
const totalGap = (colVal: number) => {
    return totalColCount(colVal) - 1;
}


const GapCol = styled.div<{
    col?: number
}>`
  ${props => css`
    flex: 0 0 calc(${oneColP(props.col)}% - (var(--flex-basic-gap) * (${totalGap(props.col)}) / ${totalColCount(props.col)}));
  `}
`;

const GapRow = styled.div<{
    gap?: string
}>`
    ${props => props.gap && css`
      --flex-basic-gap: ${props.gap};
    `}

    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: var(--flex-basic-gap);
`;

上面是用。Grid System，下面是用 Flex + 計算Gap。看起來是有對齊到，但好像更複雜一點？有點像是為了想 Gap 而 Gap

另一個思考：Bootstrap 5 嵌套 gutter ?

需要注意的一個點，Bootstrap 5 的設計是覆寫 --bs-gutter-x 之後

這樣做有好處是，往往我們是引入很多不同的元件，這樣就不會被影響

在嵌套的下一層不會受到影響，如果需要下面也一樣的話，需要再蓋一次下層，或是從最設定檔中設定，等於是說，gutters 其實是需要的，因為我們會需要在不同尺寸中的網格有不同的 gutter, 並且統一下他們的 gutter，然後根據有些區塊做不同的 gutter

結論

那在哪邊才適合使用 Flex + Gap 呢?

不需要使用佔比來分配容器空間的地方

就是比較常見的使用 mr-? 這種推開的地方

需要網格列表還是乖乖使用 Grid System，或是 Flex + CSS Grid Gap

Flexbox 對齊方式記憶

2023年9月19日 · 閱讀時間約 2 分鐘

Imagine Chiu

Front End Engineer @ Bearests

身為一個前端工程師，對於 Flexbox 的對齊方式一直沒有很有系統地方式去使用他，常常遇到要對齊置中的時候，就先用 align-item-center, 如果不行，然後再用 justify-content-center 試試看，如果再不行... 恩.. 應該就是父容器的高度問題了。

時至今日，應該要用一個方式來記憶他了

主軸與交錯軸

先搞清楚你是要控制 主軸 還是控制 交錯軸

justify-content 負責控制主軸對齊
align-items 負責控制交錯軸對齊

Row 水平排列

Row 是水平排列，所以控制主軸的對齊就是 水平對齊

Flex

align-self

Flex

Column 垂直排列

Column 是垂直排列，所以控制主軸的對齊就是 垂直對齊

Flex

align-self

Flex

結論

所以我們只需要記，現在是 flex-row，那我想改垂直置中，那麼就控制主軸的相反交錯軸是 align-item 在控制的反之，如果現在是 flex-column，那我想改垂直置中，那麼的主軸 justify-content 在控制的

Flex(Row) + Overflow-x issue​

修正後的版本​

另一個思考：Bootstrap 5 嵌套 gutter ?​

結論​

主軸 與 交錯軸​

Row 水平排列​

Column 垂直排列​

結論​

Flex(Row) + Overflow-x issue

修正後的版本

另一個思考：Bootstrap 5 嵌套 gutter ?

結論

主軸與交錯軸

Row 水平排列

Column 垂直排列

結論