Help About css flex basis

[Hdiahs682h]

gusto ko po sana na e fit yung entermediate, degree, post graduate hindi kasi siya nag fit sa background, hindi nagana yung flex-basis: 31%; liliit sana para mag fit sa di po na gana.

.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

 

[🤖]

Kung gusto mong paliitin ang flex-basis ng .course-col upang mag-fit ang mga salita sa background, maaari mong baguhin ang halaga ng flex-basis sa mas mababang halaga. Subukan mong palitan ang halagang 31% sa halimbawa 25% para mas maliit na ang laki ng mga elemento sa loob ng .course-col.

.course-col{
    flex-basis: 25%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

Kung hindi pa rin nagkasya, maaari mong subukan na bawasan ang padding o magdagdag ng margin upang mas maging maluwag ang layout.

 

[Hdiahs682h]

Kung gusto mong paliitin ang flex-basis ng .course-col upang mag-fit ang mga salita sa background, maaari mong baguhin ang halaga ng flex-basis sa mas mababang halaga. Subukan mong palitan ang halagang 31% sa halimbawa 25% para mas maliit na ang laki ng mga elemento sa loob ng .course-col.

.course-col{
    flex-basis: 25%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

Kung hindi pa rin nagkasya, maaari mong subukan na bawasan ang padding o magdagdag ng margin upang mas maging maluwag ang layout.

ayaw pa rin, paano e fit shrink yung text para lumiit yung box?

 

[🤖]

ayaw pa rin, paano e fit shrink yung text para lumiit yung box?

Kung ayaw pa rin mag-fit ang mga salita sa loob ng background gamit ang mga naunang paraan, maaari mong subukan ang mga sumusunod:

1. Gumamit ng font-size at line-height upang i-adjust ang laki ng text sa loob ng .course-col. Subukan mong magbawas ng font-size at magdagdag ng line-height upang mag-fit ang mga salita sa loob ng background. Halimbawa:

.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    transition: 0.5s;
}

2. Gumamit ng text-overflow upang i-cut ang text kung hindi ito kasya sa loob ng .course-col. Subukan mong idagdag ang sumusunod sa iyong CSS:

.course-col{
    /* iba pang mga CSS properties */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3. Gumamit ng word-break upang i-break ang mga salita sa loob ng .course-col kung hindi ito kasya. Subukan mong idagdag ang sumusunod sa iyong CSS:

.course-col{
    /* iba pang mga CSS properties */
    word-break: break-all;
}

Sana makatulong ito sa iyo!

 

[Jihoo]

Ang laki tulong nito boss robot

 

[Hdiahs682h]

Kung ayaw pa rin mag-fit ang mga salita sa loob ng background gamit ang mga naunang paraan, maaari mong subukan ang mga sumusunod:

1. Gumamit ng font-size at line-height upang i-adjust ang laki ng text sa loob ng .course-col. Subukan mong magbawas ng font-size at magdagdag ng line-height upang mag-fit ang mga salita sa loob ng background. Halimbawa:

.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    transition: 0.5s;
}

2. Gumamit ng text-overflow upang i-cut ang text kung hindi ito kasya sa loob ng .course-col. Subukan mong idagdag ang sumusunod sa iyong CSS:

.course-col{
    /* iba pang mga CSS properties */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3. Gumamit ng word-break upang i-break ang mga salita sa loob ng .course-col kung hindi ito kasya. Subukan mong idagdag ang sumusunod sa iyong CSS:

.course-col{
    /* iba pang mga CSS properties */
    word-break: break-all;
}

Sana makatulong ito sa iyo!

ito po ang gusto ko po ma achieve

 

[🤖]

View attachment 2641062ito po ang gusto ko po ma achieve

Ahh, nalito ako sa una mong tanong. Para ma-achieve ang ginusto mong layout, maaari mong subukan ang sumusunod na CSS:

.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.course-col h3 {
    font-size: 20px;
    margin: 0;
}

.course-col p {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.course-col button {
    margin-top: 20px;
}

Dito, ginamit natin ang display property na flex upang magamit ang mga properties tulad ng flex-direction at justify-content upang mag-arrange ng tamang laki ng mga elemento sa loob ng .course-col. Siniguro rin natin na hindi magpakita ng default margin ang mga elemento sa loob ng .course-col sa pamamagitan ng margin: 0; sa h3 at p elements.

 

[Hdiahs682h]

thanks nakuha kuna