Skip to main content

3 posts tagged with "Flexbox"

View All Tags

Flexbox Row + OverflowX issue

· One min read
Imagine Chiu
Front End Engineer @ Acrool

When using Flexbox for typesetting, you sometimes encounter a similar problem. The content cannot be stretched when it overflows, causing the background to be unable to display the entire block.

Flex(Row) + Overflow-x issue

scroll right check the overflow-x issue, background color not full width

CurrentRank
11~20
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
x2.00%
Next Level
Friends Rolling
Rebate
Number Withdrawal
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Next Rank
21~30
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
x2.00%
<section className="d-flex flex-column overflow-X">
<div>curr level</div>
<div>title</div>
<div>next level</div>
</section>

Fix version

scroll right check, background color full width, mainly separate flex column from overflow-x

CurrentRank
11~20
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
x2.00%
Next Level
Friends Rolling
Rebate
Number Withdrawal
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Next Rank
21~30
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
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 Replace Grid System?

· 3 min read
Imagine Chiu
Front End Engineer @ Acrool

Flexbox can be used as Gap, directly speaking, it solves what Grid System wants to do, which is to use negative Margin in Row to offset the padding of Col at the beginning and end of a row.

Then... is there no problem?

I think if it was better, Bootstrap 5 would have changed it long ago

We can find that the length of the Gap will not be calculated and included in the flex item (25% * 4 if the ratio is used to allocate the space), that is, the Gap will be more than 100%, causing the version to run.

You can use an algorithm to use flex-basis: 0 0 ratio, but you can also use 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);
`;

The above is used. Grid System, the following is using Flex + to calculate Gap. It seems to be aligned, but there seems to be no difference? Kind of like Gap for the sake of thinking Gap

Another thought: Bootstrap 5 nested gutter?

One thing to note is that the design of Bootstrap 5 is to override --bs-gutter-x

The advantage of doing this is that we often introduce many different components so that they will not be affected

The next layer of nesting will not be affected. If you need the same thing below, you need to cover the lower layer again. Or set it from the final configuration file, which means that gutters is actually needed. Because we will need different gutter for grids in different sizes, and unify their gutter, Then make different gutter according to some blocks

in conclusion

So where is it suitable to use Flex + Gap?

Where there is no need to use proportions to allocate container space

It is a common place to use mr-? to push away

If you need a grid list, just use Grid System, or Flex + CSS Grid Gap

Flexbox alignment memory

· 2 min read
Imagine Chiu
Front End Engineer @ Acrool

As a front-end engineer, I have never had a very systematic way to use Flexbox alignment. I often use align-item-center when I need to align to center, and if that doesn't work, I'll try justify-content-center. If that still doesn't work... well, it should be a parent container height problem.

It's time to come up with a way to remember it today.

Main axis and cross axis

First, figure out who is the main axis and who is the cross axis

flexbox-alignment.png

  • justify-content control main axis alignment
  • align-items control cross axis alignment

Row (Arrange horizontally)

Row is horizontal alignment, so controlling the alignment of the main axis is horizontal alignment.

Flex
align-self
Flex

Column (vertical arrangement)

Column is a vertical layout, so controlling the alignment of the main axis is the same as controlling the vertical alignment

Flex
align-self
Flex

Finish

So we only need to remember that if the current flex direction is flex-row, then to center vertically, we need to control the opposite of the main axis. The cross axis is controlled by align-item. Conversely, if the current flex direction is flex-column, then to center vertically, we need to control the main axis. The main axis is controlled by justify-content.