🔒 Closed About css flex basis

Status
Not open for further replies.

Hdiahs682h

Honorary Poster
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.
CSS:
.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}

1683587979296.webp 1683588025786.webp
 
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.

CSS:
.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.
 
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.

CSS:
.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:

CSS:
.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:

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:

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

Sana makatulong ito sa iyo!
 
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:

CSS:
.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:

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:

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

Sana makatulong ito sa iyo!
1683590297499.webp
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:

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.
 
Status
Not open for further replies.

About this Thread

  • 7
    Replies
  • 598
    Views
  • 2
    Participants
Last reply from:
Hdiahs682h

Trending Topics

Online now

Members online
1,097
Guests online
1,375
Total visitors
2,472

Forum statistics

Threads
2,273,408
Posts
28,949,318
Members
1,235,739
Latest member
Angela012
Back
Top