flexbox

0

Witam, robię grę w kółko i krzyżyk i stylując w css dalej ikona pojawia mi się w lewym górnym rogu pola, wie ktoś czemu?
html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Document</title>
    <script src="https://kit.fontawesome.com/4e938b38b8.js" crossorigin="anonymous"></script>
</head>


<body>
    
    <table>
        <tr>
            <td class='box fa'></td>
            <td class='box fa'></td>
            <td class='box fa'></td>
        </tr>
        <tr>
            <td class='box fa'></td>
            <td class='box fa'></td>
            <td class='box fa'></td>
        </tr>
        <tr>
            <td class='box fa'></td>
            <td class='box fa'></td>
            <td class='box fa'></td>
        </tr>
    </table>
    <script src="app.js"></script>
</body>

</html>

css:

td {
    border: 1px solid black;
    height: 50px;
    width: 50px;
    }


.box {
    display: flex; justify-content: center; align-items: center;
    }

js:

const p1 = 'fa-circle';
const p2 = 'fa-times';
const boxes = [...document.querySelectorAll('td')];
boxes.forEach(box => box.addEventListener('click', take));

function take(e) {
    e.target.classList.add(p2);
}
2

Nie mam pojęcia, bo nie mam pojęcia, co robi klasa p2.

Prawdopodobnie najzupełniej zbędnie używasz tutaj flexboxa. W komórkach tabeli możesz używać zwykłego: tex-align jak i vertical-align.

0

klasa p2 dodaje klasę font awesome - krzyżyk

1
mistrzkrisu6 napisał(a):

klasa p2 dodaje klasę font awesome - krzyżyk

I oczekujesz, że pójdę sprawdzać po necie, co to za klasa, a później złożę to sobie w całość, żeby zobaczyć jak wygląda efekt i dlaczego nie działa, jak by miało działać?

1

Też uważam, że można to zrobić prościej.
Demo: https://jsfiddle.net/L1ts3f5e/

1 użytkowników online, w tym zalogowanych: 0, gości: 1